/**
 * blocks/bonus-banner/bonus-grid.css
 * Bonus cards grid used on the Bonus page (8 cards, 4x2 desktop, 1 col mobile).
 */
.bonus-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}
.bonus-card__image {
  width: 100%;
  /* height:auto is required here — the <img> tag still carries a hardcoded
     height="..." HTML attribute (a sizing hint for old browsers), which
     otherwise wins over aspect-ratio since aspect-ratio only applies when
     one dimension is auto. Without this, height stays fixed at the
     attribute's value regardless of the ratio below, causing letterboxing. */
  height: auto;
  /* Matches the real bonus1.webp..bonus8.webp source images (1908x980) so
     object-fit:contain fills the box exactly with no empty letterboxing
     above/below, while still never cropping the image. */
  aspect-ratio: 1908 / 980;
  object-fit: contain;
  background: var(--color-bg-dark);
}
.bonus-card__title { margin: 0; }
.bonus-card__text { flex-grow: 1; margin: 0; font-size: var(--fs-small); }
.bonus-card__cta { margin-top: 4px; }