/**
 * Intro Card Component (Figma node 2363:14594)
 *
 * Desktop:
 * - image + text: 6 columns each (12-col grid)
 * - gap: 24px
 * - image height: 555px
 * - text: body-1 (36px), line-height 1, tracking -0.02em
 *
 * Mobile:
 * - image full-bleed (100vw, no side padding)
 * - text follows site grid (container padding)
 * - text: body-1 mobile (24px), line-height 1, tracking -0.02em
 */

.intro-card {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gap);
    row-gap: 24px;
    align-items: start;
}

.intro-card__image {
    grid-column: span 6;
    height: 555px;
    background-color: var(--color-card);
    border: 1px solid var(--color-border-a8);
}

.intro-card__text {
    grid-column: span 6;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-body-1-desktop); /* 36px */
    font-weight: 300;
    line-height: var(--line-height-body-1-desktop); /* 100% */
    letter-spacing: -0.02em; /* -2% */
    color: var(--color-content);
    white-space: normal;
    text-align: left;
    text-indent: 0; /* no first-line indent */
}

@media (min-width: 1441px) {
    /* keep 6/6 split even on 16-col pages by keeping component grid 12-col */
}

@media (max-width: 768px) {
    .intro-card {
        grid-template-columns: repeat(6, 1fr);
        gap: 24px;
    }

    /* Full-bleed image, no side padding */
    .intro-card__image {
        grid-column: 1 / -1;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }

    .intro-card__text {
        grid-column: 1 / -1;
        font-size: var(--font-size-body-1-mobile); /* 24px */
        letter-spacing: -0.02em; /* -2% */
        line-height: var(--line-height-body-1-mobile); /* 100% */
    }
}