/**
 * bonus/bonus.css — BEM: bonus-grid (bonus cards grid, page-specific)
 */
.bonus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
}

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

.bonus-grid__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--color-bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}
.bonus-grid__media img { width: 100%; height: 100%; object-fit: contain; }

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

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