/**
 * Mobile-First Responsive Design
 * Breakpoints: 320px, 768px, 1024px, 1440px
 */

:root {
    --container-padding: 16px;
    --grid-columns: 1;
    --font-size-base: 16px;
    --touch-target: 48px;
}

@media (min-width: 768px) {
    :root {
        --container-padding: 24px;
        --grid-columns: 2;
        --font-size-base: 18px;
    }
}

@media (min-width: 1024px) {
    :root {
        --container-padding: 32px;
        --grid-columns: 3;
        --font-size-base: 16px;
    }
}

@media (min-width: 1440px) {
    :root {
        --container-padding: 40px;
        --grid-columns: 4;
    }
}

button,
a,
.clickable {
    min-height: var(--touch-target);
    min-width: var(--touch-target);
}

.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: 16px;
}

@media (max-width: 900px) {
    .sidebar {
        display: none;
    }
}