/* Page-level overrides for the New To Forge template only.
   Section styling itself lives in each section's own classes/[name]/[name].css. */

.image-text {
    background: var(--color-greige-light);
}

/* Desktop eyebrow matches the body copy beneath it here, rather than the
   default terracotta accent. */
.content-banner__eyebrow--desktop {
    color: var(--color-dark);
}

.content-banner__body {
    font-style: normal;
}

.content-banner__cta {
    width: fit-content;
}

.page-hero__media img {
    object-position: top center;
}

.feature-grid__body {
    color: #201211;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: none;
    font-size: 18px;
}

.feature-grid {
    padding-top: 80px;
    padding-bottom: 80px;
}

.feature-grid__illustration {
    opacity: 0.5;
}

@media (max-width: 1366px) {
    .feature-grid {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

/* Laptop only — equal 50/50 head columns. Below this the head stacks (base). */
@media (min-width: 1025px) and (max-width: 1366px) {
    .feature-grid__head-left,
    .feature-grid__head-right {
        flex: 1 1 0;
        max-width: none;
    }
}

/* Mobile: the line-art illustration drops out of its absolute full-height
   background position and becomes an in-flow banner at the top of the
   section, fully visible, with the copy flowing beneath it. */
@media (max-width: 767px) {
    .feature-grid {
        padding-left: 0;
        padding-right: 0;
    }

    .feature-grid__head {
        padding-left: var(--pad-x);
        padding-right: var(--pad-x);
    }

    .feature-grid__illustration {
        position: relative;
        left: auto;
        transform: none;
        width: 100%;
        height: auto;
        margin-bottom: 32px;
        overflow: hidden;
    }

    .feature-grid__illustration img {
        width: 200%;
        max-width: none;
        height: auto;
        object-position: left bottom;
    }
}