/* ==========================================================================
   Bonus cards grid — 4 columns x 2 rows desktop, 1 column mobile.
   Images must display in full, never cropped (object-fit: contain).
   ========================================================================== */

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

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

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

.bonus-cards__item {
  display: flex;
  flex-direction: column;
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  padding: var(--space-card-padding);
  box-shadow: var(--shadow-card);
}

.bonus-cards__image {
  width: 100%;
  height: 10rem;
  object-fit: contain;
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  margin-bottom: 1rem;
}

.bonus-cards__title {
  margin-bottom: 0.5rem;
}

.bonus-cards__text {
  flex-grow: 1;
  margin-bottom: 1rem;
}

.bonus-cards__cta {
  align-self: flex-start;
}