.promo-banner > div:first-child { position: relative; z-index: 2; }
.promo-banner > a { z-index: 2; }
.promo-art { position: absolute; inset: 0; z-index: 0; }
.promo-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,16,38,.96) 0%, rgba(7,25,60,.84) 38%, rgba(8,25,55,.12) 76%); }
.promo-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.feature-band.has-art { grid-template-columns: .8fr 230px 1.15fr; gap: 28px; }
.feature-art { margin: 0; align-self: stretch; min-height: 250px; overflow: hidden; border: 1px solid #36527b; border-radius: 18px; }
.feature-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.inline-art { margin: 0 0 22px; aspect-ratio: 3/2; overflow: hidden; border: 1px solid #304563; border-radius: 14px; }
.inline-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
@media (max-width: 1050px) { .feature-band.has-art { grid-template-columns: 1fr 220px; } .feature-band.has-art .do-dont { grid-column: 1/-1; } }
@media (min-width: 721px) and (max-width: 1050px) { .promo-banner { min-height: 210px; padding: 24px 22px 76px; align-items: flex-start; } .promo-banner > div:first-child { max-width: 68%; } .promo-banner h1 { font-size: clamp(28px,4vw,34px); } .promo-banner > a { left: 22px; right: auto; bottom: 20px; } .promo-art img { object-position: 68% center; } }
@media (max-width: 720px) { .promo-banner { min-height: 230px; padding: 24px 22px 76px; } .promo-art img { object-position: 68% center; } .promo-art::after { background: linear-gradient(90deg,rgba(5,16,38,.96),rgba(7,25,60,.68)),linear-gradient(0deg,rgba(5,16,38,.75),transparent); } .feature-band.has-art { grid-template-columns: 1fr; } .feature-band.has-art .do-dont { grid-column: auto; } .feature-art { min-height: 320px; } }