/* ========== Promo banners (only ratios + image fill) ========== */
.promo-banners {
  /* width ratios based on 816 + 400 = 1216 */
  --promo-w1: 0.6710526; /* 816 / 1216 */
  --promo-w2: 0.3289474; /* 400 / 1216 */
}

.promo-card {
  position: relative;
  overflow: hidden;
  display: block;
  min-width: 0;
  border-radius: 16px;
}

.promo-card--wide {
  /* (100% - gap) because it's two items with one gap */
  /* default assumes lg:gap-4 = 16px = 1rem */
  flex: 0 0 calc((100% - 1rem) * var(--promo-w1));
  aspect-ratio: 816 / 519;
}

.promo-card--tall {
  flex: 0 0 calc((100% - 1rem) * var(--promo-w2));
  aspect-ratio: 400 / 555;
}

/* handle different gaps: gap-2 = 8px = 0.5rem on small */
@media (max-width: 1024px) {
  .promo-card {
    border-radius: 8px;
  }

  .promo-card--wide {
    flex-basis: calc((100% - 0.5rem) * var(--promo-w1));
  }

  .promo-card--tall {
    flex-basis: calc((100% - 0.5rem) * var(--promo-w2));
  }
}

.promo-img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center;
}