:root {
    --build-hero-max-width: 1728px;
}

/*
    Carry Build banners are generated at 2048 × 1024 (2:1).
    Keeping the artwork at its native ratio prevents the headline,
    branding and footer strip from being cropped.
*/
.carry-build-page {
    overflow-x: clip;
    background: #f5f7f7;
}

.build-image-hero {
    position: relative;
    padding-bottom: 3rem;
    background:
        linear-gradient(
            180deg,
            #ffffff 0,
            #ffffff 68%,
            #f5f7f7 68%
        );
}

.build-image-hero__visual {
    width: min(100%, var(--build-hero-max-width));
    aspect-ratio: 2 / 1;
    margin-inline: auto;

    background-image: var(--build-hero-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #063b2e;

    box-shadow: 0 24px 65px rgba(5, 54, 39, .18);
}

/*
    The search panel slightly overlaps the banner without hiding
    the generated buttons and footer content.
*/
.build-image-hero__search-wrap {
    position: relative;
    z-index: 3;
    margin-top: clamp(-2.75rem, -2.5vw, -1.5rem);
}

.build-image-hero .build-search-box {
    border: 1px solid rgba(8, 66, 48, .14);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 70px rgba(5, 54, 39, .22);
    backdrop-filter: blur(16px);
}

.build-image-hero .build-popular {
    width: fit-content;
    max-width: 100%;
    margin: .9rem auto 0;
    padding: .65rem .85rem;

    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;

    color: #fff;
    background: rgba(4, 47, 35, .92);

    box-shadow: 0 12px 35px rgba(4, 47, 35, .18);
    backdrop-filter: blur(12px);
}

.build-image-hero .build-popular a {
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
}

.build-image-hero .build-popular a:hover {
    color: #08231d;
    border-color: #ffc21c;
    background: #ffc21c;
}

@media (min-width: 1729px) {
    .build-image-hero__visual {
        border-radius: 0 0 1.6rem 1.6rem;
    }
}

@media (max-width: 991.98px) {
    .build-image-hero {
        padding-bottom: 2rem;
    }

    .build-image-hero__visual {
        aspect-ratio: 2 / 1;
        background-size: contain;
        background-position: center;
    }

    .build-image-hero__search-wrap {
        margin-top: -1.25rem;
    }
}

@media (max-width: 767.98px) {
    .build-image-hero {
        padding-top: .75rem;
        background: #f5f7f7;
    }

    /*
        On phones, preserve the complete banner rather than cropping
        out its embedded text. The letterbox colour matches the artwork.
    */
    .build-image-hero__visual {
        width: calc(100% - 1rem);
        aspect-ratio: 2 / 1;
        border-radius: 1rem;
        background-size: contain;
        background-position: center;
    }

    .build-image-hero__search-wrap {
        margin-top: 0;
        padding-top: 1rem;
    }

    .build-image-hero .build-search-box {
        border-radius: 1.15rem;
    }

    .build-image-hero .build-popular {
        width: 100%;
        border-radius: 1rem;
        color: #17352b;
        background: #fff;
    }

    .build-image-hero .build-popular a {
        color: #075c43;
        border-color: rgba(7, 92, 67, .15);
        background: #eef8f4;
    }
}