.banner{
  min-height:112px;
  padding:19px 18px;
  display:flex;
  align-items:flex-end;
  background:#111317;
}

.banner::before{
  background-image:
    linear-gradient(90deg,rgba(4,5,7,.98) 0%,rgba(4,5,7,.88) 40%,rgba(4,5,7,.18) 78%),
    linear-gradient(0deg,rgba(4,5,7,.56),transparent 62%),
    var(--image);
  background-position:center;
  transition:transform .5s,filter .35s;
}

.banner::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  pointer-events:none;
}

.banner:hover::before{
  transform:scale(1.035);
  filter:saturate(1.08);
}

.banner-featured{min-height:132px}

.banner-copy{
  min-width:0;
  max-width:76%;
  display:grid;
  gap:4px;
  text-shadow:0 2px 14px rgba(0,0,0,.72);
}

.banner-copy strong{
  font-size:18px;
  line-height:1.08;
  letter-spacing:-.03em;
}

.banner-copy em{color:#d2d4d8}

@media(max-width:520px){
  .banner{min-height:112px}
  .banner-featured{min-height:128px}
}