/* Practical use cases */

.use-groups {
    display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: hidden;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
}

.use-groups section {
    padding: var(--space-8);
        background: var(--color-background);
}

.use-groups section:nth-child(even) {
    border-inline-start: 1px solid var(--color-border);
}

.use-groups section:nth-child(n + 3) {
    border-block-start: 1px solid var(--color-border);
}

.use-groups h3 {
    font-size: var(--text-2xl);
}

@media (max-width: 42rem) {
    .use-groups {
        grid-template-columns: 1fr;
    }
    
    .use-groups section {
        padding: var(--space-6);
    }
    
    .use-groups section:nth-child(even) {
        border-inline-start: 0;
    }
    
    .use-groups section + section {
        border-block-start: 1px solid var(--color-border);
    }
}