/* BREAKPOINT DOCUMENTATION */
:root {
    --breakpoint-mobile: 640px;
    --breakpoint-tablet: 900px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1440px;
}

/* CONTAINER SIZING STANDARDS */
.container {
    max-width: 1200px;
    padding: 0 24px;
}

.container-narrow {
    max-width: 800px;
    padding: 0 24px;
}

.container-wide {
    max-width: 1440px;
    padding: 0 32px;
}

/* RESPONSIVE TYPOGRAPHY */
@media (max-width: 640px) {
    .display-xl {
        font-size: clamp(2.5rem, 8vw, 4rem);
    }

    .section-headline {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
    }

    .body-large {
        font-size: 1rem;
    }
}

/* RESPONSIVE GRIDS */
@media (max-width: 900px) {
    .bento-v2 {
        grid-template-columns: 1fr;
    }

    .pillars-grid {
        grid-template-columns: 1fr;
    }

    .elongated-cards {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
}

/* RESPONSIVE SPLIT SECTIONS */
@media (max-width: 1024px) {
    .split-section {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .split-section--reverse {
        grid-template-columns: 1fr;
    }
}