/* ==========================================
   CATALOG
   Global Styles
========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    background: var(--color-background);

    color: var(--color-text);

    font-family: var(--font-family);

    min-height: 100vh;

}

#app {

    min-height: 100vh;

}

/* ==========================================
   LAYOUT SYSTEM
========================================== */

.container {

    width: min(1440px, calc(100% - 64px));

    margin-inline: auto;

}

.section {

    padding-block: var(--space-xxl);

}

.section-title {

    margin-bottom: var(--space-xl);

    font-size: clamp(2rem, 4vw, 3.5rem);

    font-weight: 300;

    line-height: 1.1;

    letter-spacing: -0.03em;

}

/* ==========================================
   GRID SYSTEM
========================================== */

.grid {

    display: grid;

    gap: var(--space-xl);

}

.grid-2 {

    grid-template-columns: repeat(2, minmax(0, 1fr));

}

.grid-3 {

    grid-template-columns: repeat(3, minmax(0, 1fr));

}

.grid-4 {

    grid-template-columns: repeat(4, minmax(0, 1fr));

}

/* ==========================================
   TYPOGRAPHY SYSTEM
========================================== */

.display-xl {

    font-size: clamp(3rem, 8vw, 6rem);

    font-weight: 300;

    line-height: .95;

    letter-spacing: -.04em;

}

.display-lg {

    font-size: clamp(2.5rem, 6vw, 4.5rem);

    font-weight: 300;

    line-height: 1;

    letter-spacing: -.03em;

}

.heading {

    font-size: clamp(1.8rem, 4vw, 3rem);

    font-weight: 500;

    line-height: 1.1;

}

.subheading {

    font-size: clamp(1.1rem, 2vw, 1.5rem);

    color: var(--color-text-secondary);

    line-height: 1.5;

}

.text-body {

    font-size: 1rem;

    line-height: 1.7;

    color: var(--color-text-secondary);

}

.text-small {

    font-size: .875rem;

    line-height: 1.6;

    color: var(--color-text-secondary);

}

/* ==========================================================
   TRANSITION SYSTEM
   ========================================================== */

[data-component] {

    transition:
        opacity 300ms ease;

}

/* ==========================================================
   TRANSITION SYSTEM
   ========================================================== */

:root {

    --transition-duration: 800ms;
    --transition-easing: ease-in-out;

}

[data-component] {

    opacity: 1;

    transition:
        opacity var(--transition-duration)
        var(--transition-easing);

}

.transition-hidden {

    opacity: 0;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1024px) {

    .grid-4 {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media (max-width: 768px) {

    .container {

        width: min(100% - 32px, 1440px);

    }

    .grid-2,
    .grid-3,
    .grid-4 {

        grid-template-columns: 1fr;

    }

}