.drvn-promo-grid{
  --drvn-gap:18px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.48fr) minmax(0,.48fr);
  grid-template-rows:minmax(245px,.9fr) minmax(245px,.9fr);
  gap:var(--drvn-gap);
  width:100%;
  min-height:720px;
}

.drvn-promo-card{
  position:relative;
  overflow:hidden;
  border-radius:5px;
  isolation:isolate;
  background:#111;
  color:#fff;
  text-decoration:none!important;
  min-width:0;
  transform:translateZ(0);
}

.drvn-promo-card-1{grid-column:1;grid-row:1 / span 2}
.drvn-promo-card-2{grid-column:2 / span 2;grid-row:1}
.drvn-promo-card-3{grid-column:2;grid-row:2}
.drvn-promo-card-4{grid-column:3;grid-row:2}

.drvn-promo-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.001);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
  z-index:-3;
}

.drvn-promo-placeholder{
  background:linear-gradient(135deg,#202020,#3a3a3a);
}

.drvn-promo-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(0,0,0,.48) 100%);
  transition:background .35s ease;
}

.drvn-promo-copy{
  position:absolute;
  left:30px;
  bottom:28px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  max-width:calc(100% - 60px);
}

.drvn-promo-title,
.drvn-promo-subtitle{
  position:relative;
  display:inline-block;
  width:max-content;
  max-width:100%;
  color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.22);
}

.drvn-promo-title{
  font-size:clamp(25px,2.1vw,42px);
  line-height:1.05;
  font-weight:750;
  letter-spacing:-.02em;
}

.drvn-promo-subtitle{
  font-size:clamp(14px,1vw,18px);
  line-height:1.25;
  font-weight:650;
}

.drvn-promo-title::after,
.drvn-promo-subtitle::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:100%;
  height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .28s ease;
}

.drvn-promo-card:hover .drvn-promo-bg,
.drvn-promo-card:focus-visible .drvn-promo-bg{
  transform:scale(1.045);
}

.drvn-promo-card:hover .drvn-promo-title::after,
.drvn-promo-card:hover .drvn-promo-subtitle::after,
.drvn-promo-card:focus-visible .drvn-promo-title::after,
.drvn-promo-card:focus-visible .drvn-promo-subtitle::after{
  transform:scaleX(1);
}

.drvn-promo-card:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}

@media (max-width:1024px){
  .drvn-promo-grid{
    min-height:600px;
    grid-template-rows:minmax(210px,.8fr) minmax(210px,.8fr);
    --drvn-gap:14px;
  }
  .drvn-promo-copy{left:22px;bottom:22px;max-width:calc(100% - 44px)}
}

@media (max-width:767px){
  .drvn-promo-grid{
    display:flex;
    min-height:0;
    width:100%;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 18px 12px 2px;
    scroll-snap-type:x mandatory;
    scroll-padding-left:2px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .drvn-promo-grid::-webkit-scrollbar{display:none}
  .drvn-promo-card,
  .drvn-promo-card-1,
  .drvn-promo-card-2,
  .drvn-promo-card-3,
  .drvn-promo-card-4{
    flex:0 0 84vw;
    width:84vw;
    height:108vw;
    max-height:520px;
    min-height:390px;
    grid-column:auto;
    grid-row:auto;
    scroll-snap-align:start;
    border-radius:5px;
  }
  .drvn-promo-bg{background-position:center center}
  .drvn-promo-copy{left:22px;bottom:22px;max-width:calc(100% - 44px);gap:7px}
  .drvn-promo-title{font-size:30px}
  .drvn-promo-subtitle{font-size:16px}
}

@media (max-width:420px){
  .drvn-promo-card,
  .drvn-promo-card-1,
  .drvn-promo-card-2,
  .drvn-promo-card-3,
  .drvn-promo-card-4{
    flex-basis:88vw;
    width:88vw;
    height:116vw;
    min-height:360px;
  }
  .drvn-promo-title{font-size:27px}
  .drvn-promo-subtitle{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .drvn-promo-bg,.drvn-promo-title::after,.drvn-promo-subtitle::after{transition:none}
}