/* ==========================================================================
   Bonus grid block (bonus page) — 4 columns / 2 rows on desktop
   ========================================================================== */

.bonus-grid__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
  margin-block-start: var(--space-h2-text);
}

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

.bonus-grid__image-wrap {
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.bonus-grid__image {
  width: 100%;
  height: auto;
  display: block;
}

.bonus-grid__card h3 {
  margin: 0;
}

.bonus-grid__card p {
  margin: 0;
  flex-grow: 1;
}

.bonus-grid__claim {
  align-self: flex-start;
  font-size: var(--fs-small);
  padding-block: 0.65rem;
}

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

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