.bg-banners{--bg-accent:#ff7a00}
.bg-banners__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}
.bg-brand-banner{
    position:relative;
    min-height:315px;
    overflow:hidden;
    display:flex;
    align-items:center;
    border:1px solid #e9a35b;
    border-radius:12px;
    background:#f7f3ef;
    box-shadow:0 10px 24px rgba(56,36,17,.04);
    isolation:isolate;
    transition:transform .3s ease,box-shadow .3s ease;
}
.bg-brand-banner:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 38px rgba(56,36,17,.13);
}

/* Completely remove the previous white gradient layer. */
.bg-brand-banner:after,
.bg-brand-banner--right:after,
.bg-brand-banner--left:after{
    display:none!important;
    content:none!important;
    background:none!important;
}
.bg-brand-banner__copy{
    direction:rtl;
    position:relative;
    z-index:2;
    width:52%;
    max-width:370px;
    padding:26px;
    margin:0;
    text-align:right;
}
.bg-banners__grid>.bg-brand-banner:nth-child(1) .bg-brand-banner__copy{
    margin-right:auto;
    margin-left:0;
}
.bg-banners__grid>.bg-brand-banner:nth-child(2) .bg-brand-banner__copy{
    margin-left:auto;
    margin-right:0;
}
/* Fallback for additional banners */
.bg-brand-banner--right .bg-brand-banner__copy{margin-inline-end:auto}
.bg-brand-banner--left .bg-brand-banner__copy{margin-inline-start:auto}
.bg-banners__grid>.bg-brand-banner:nth-child(1) .bg-brand-banner__copy,
.bg-banners__grid>.bg-brand-banner:nth-child(2) .bg-brand-banner__copy{
    /* nth-child placement wins over image-side fallback */
}
.bg-brand-banner h3,
.bg-brand-banner p{
    text-shadow:
        0 1px 1px rgba(255,255,255,.92),
        0 0 9px rgba(255,255,255,.82);
}
.bg-brand-banner h3{
    margin:0;
    font-size:29px;
    line-height:1.08;
    font-weight:850;
}
.bg-brand-banner h3 span{
    font-size:38px;
    color:var(--bg-accent);
}
.bg-brand-banner p{
    margin:13px 0 20px;
    color:#504840;
    font-size:12px;
    line-height:1.9;
}
.bg-brand-banner .bg-link-pill{
    border-radius:8px!important;
    border-color:var(--bg-accent);
    color:var(--bg-accent)!important;
    background:#fff;
}
.bg-brand-banner .bg-link-pill:hover,
.bg-brand-banner .bg-link-pill:focus-visible{
    background:var(--bg-accent);
    border-color:var(--bg-accent);
    color:#fff!important;
}
.bg-brand-banner__image{
    position:absolute;
    inset:0;
    z-index:0;
}
.bg-brand-banner__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform .5s ease;
    filter:none!important;
    opacity:1!important;
}
.bg-brand-banner:hover .bg-brand-banner__image img{
    transform:scale(1.035);
}
@media(max-width:850px){
    .bg-banners__grid{grid-template-columns:1fr}
    .bg-brand-banner{min-height:300px}
    .bg-banners__grid>.bg-brand-banner:nth-child(1) .bg-brand-banner__copy{
        margin-right:auto;
        margin-left:0;
    }
    .bg-banners__grid>.bg-brand-banner:nth-child(2) .bg-brand-banner__copy{
        margin-left:auto;
        margin-right:0;
    }
}
@media(max-width:520px){
    .bg-brand-banner{
        min-height:310px;
        align-items:flex-end;
    }
    .bg-brand-banner__copy{
        width:min(76%,320px);
        padding:18px;
    }
    .bg-banners__grid>.bg-brand-banner:nth-child(1) .bg-brand-banner__copy{
        margin-right:auto;
        margin-left:0;
    }
    .bg-banners__grid>.bg-brand-banner:nth-child(2) .bg-brand-banner__copy{
        margin-left:auto;
        margin-right:0;
    }
    .bg-brand-banner h3{
        font-size:21px;
        line-height:1.2;
    }
    .bg-brand-banner h3 span{font-size:29px}
    .bg-brand-banner p{
        max-width:100%;
        margin:8px 0 12px;
        font-size:11px;
        line-height:1.75;
    }
    .bg-brand-banner .bg-link-pill{
        min-height:36px;
        padding:7px 12px;
        font-size:11px;
    }
}
@media(prefers-reduced-motion:reduce){
    .bg-brand-banner,
    .bg-brand-banner__image img,
    .bg-brand-banner .bg-link-pill{
        transition:none!important;
    }
}

/* When the visual is on the right, keep CTA at the far-left edge of its copy area. */
.bg-brand-banner--right .bg-link-pill{
    margin-right:auto!important;
    margin-left:0!important;
    align-self:flex-start;
}
.bg-brand-banner--right .bg-brand-banner__copy{
    display:flex;
    flex-direction:column;
    align-items:stretch;
}