#hcBtsMel {
    position:relative;
    border-top:100px solid #000;
    overflow:hidden;
    padding:1rem 1rem 2rem;
    background-repeat: repeat;
    background-size: 610px
}
#heroWrap {
    display: grid;
    align-items: center;
    gap: 1.5rem;
    margin: 0 auto;
    grid-template-areas:
        "logos   logos"
        "hhtext  image"
        "cta     cta";
    grid-template-columns: 1fr 1fr
}

body.btsMelissa2026 > .wrapper .hero-cta.primary-theme-btn {box-shadow: 0 0 8px 5px white}

/* grid area labels */
.hero-logos    { grid-area: logos }
.hero-headline { grid-area: hhtext }
.hero-image    { grid-area: image }
.hero-cta      { grid-area: cta }

.hero-headline .copy {
    font-size: 7vw;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    margin: 1.2vw 0px
}
.hero-headline img {display:block;margin:0 auto;width:100%}
.hero-logos img {width:100%}
.hero-image img {width:100%}
.whtGlow {
    text-shadow: 2px 2px 3px #fff, -2px -2px 3px #fff, 2px -2px 3px #fff, -2px 2px 3px #fff;
}
#hcBtsMel img {
    filter: drop-shadow(2px 2px 1px white) drop-shadow(-2px -2px 1px white) drop-shadow(-2px 2px 1px white) drop-shadow(2px -2px 1px white)
}

@media (min-width:576px) {
    #heroWrap {width:530px}
    .hero-headline .copy {font-size:40px;margin:7px 0}
    .hero-headline img {width:250px}
}

@media (min-width: 768px) {
    #heroWrap {
        grid-template-areas:
            "logos   logos"
            "hhtext  image"
            "cta     image";
        grid-template-columns: 1fr 1fr;
        row-gap: 1px;
        width:700px
    }
    .hero-logos img {width:360px}
    .hero-headline {align-self:end}
    .hero-headline img {width:280px}
    .hero-cta {
        justify-self: start;
        width: auto;
        padding: 0.85rem 2rem
    }
    .hero-image {margin-top:-25px}
    .hero-image img {display:block;margin:0 auto}
}
@media (min-width: 992px) {
    #hcBtsMel {background-size:840px}
    #heroWrap {width:890px}
    .hero-logos img {width:400px}
    .hero-headline .copy {font-size:43px;line-height:1.1;margin:10px 0}
    .hero-headline img {width:300px}
    .hero-image {margin-top:0}
    .hero-image img {width:350px;margin-bottom:-10px}
}
@media (min-width: 1279px) {
    #hcBtsMel {background-size:1180px}
    .hero-headline .copy {font-size:45px}
    .hero-headline img {width:324px}
    .hero-image img {width:387px}
    .whtGlow {text-shadow:6px 6px 6px #fff, -6px -6px 6px #fff, 6px -6px 6px #fff, -6px 6px 7px #fff}
}