/* ==========================================================
   ABOUT
   ========================================================== */

.about {
    background: var(--color-gray-150);
}


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

.about__inner {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    align-items: start;
    gap: clamp(var(--space-600), 9vw, var(--space-700));
}


/* ==========================================================
   CONTENT
   ========================================================== */

.about__content {
    display: flex;
    flex-direction: column;

    gap: var(--space-300);

    max-width: 560px;
}

.about__eyebrow {

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

    font-size: var(--font-size-150);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-heading);

    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.about__title {

    color: var(--color-primary);

    font-size: clamp(
        var(--font-size-600),
        calc(1.5rem + 0.8vw),
        var(--font-size-625)
    );
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
}

.about__description {

    color: var(--color-gray-500);

    font-size: var(--font-size-350);
    font-weight: var(--font-weight-350);
    line-height: var(--line-height-body);
}


/* ==========================================================
   CARDS
   ========================================================== */

.about__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--space-300);
}

.about-card {
    display: flex;
    flex-direction: column;

    gap: var(--space-150);

    min-height: 220px;
    padding: var(--space-300);

    background: var(--color-white);

    border: var(--border-width) solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

.about-card__title {
    color: var(--color-primary);

    font-size: var(--font-size-450);
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-heading);
}

.about-card__title .underline-reveal {
    margin-top: var(--space-150);
}

.about-card__description {
    color: var(--color-gray-500);

    font-size: var(--font-size-250);
    font-weight: var(--font-weight-350);
    line-height: var(--line-height-body);
}

.about-card__product-name {
    color: inherit;

    font-weight: var(--font-weight-550);
}


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

@media (max-width: 1199px) {

    .about__inner {
        gap: var(--space-500);
    }

    .about__eyebrow {
        font-size: var(--font-size-100);
    }

    .about__title {
        font-size: clamp(
            var(--font-size-500),
            calc(1rem + 1.25vw),
            var(--font-size-600)
        );
    }

    .about__description {
        font-size: var(--font-size-300);
    }

    .about-card__title {
        font-size: var(--font-size-400);
    }

    .about-card__description {
        font-size: var(--font-size-200);
    }

}

@media (max-width: 1023px) {

    .about__inner {
        grid-template-columns: 1fr;

        gap: var(--space-500);
    }

    .about__content {
        max-width: 640px;
    }

    .about__description {
        font-size: var(--font-size-250);
    }

    .about__grid {
        grid-template-columns: repeat(
            auto-fit,
            minmax(min(100%, 300px), 1fr)
        );
    }

    .about-card {
        min-height: auto;
    }

}