/**
 * bonus.css — Seiteneigene Styles für die Bonus-Kartenübersicht (BEM: bonus-grid)
 */

.bonus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
}

.bonus-grid__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  padding: var(--space-card-padding);
}

.bonus-grid__image {
  width: 100%;
  /* Feste, für alle Karten identische Bildfläche — Bilder werden dadurch
     kleiner und gleich groß dargestellt, aber via object-fit: contain
     niemals beschnitten (evtl. Ränder werden mit der Hintergrundfarbe gefüllt). */
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-card);
  background: var(--color-bg-primary);
}

.bonus-grid__title {
  margin-bottom: 0;
}

.bonus-grid__desc {
  flex-grow: 1;
  font-size: var(--font-size-small);
  margin-bottom: 0;
}

@media (min-width: 480px) {
  .bonus-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .bonus-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}