/* ==========================================================================
   content-section.css — piccoli ritocchi specifici del blocco
   (il layout base è definito in global.css)
   ========================================================================== */

.content-section h2 {
  margin-bottom: var(--space-h2-text);
}

/* Mobile-first: immagine sopra il testo (dopo l'H2) */
.content-section__grid--media {
  grid-template-columns: 1fr;
}

.content-section__media {
  align-self: start;
}

/* Griglia carte bonus / promo dentro le sezioni */
.promo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-grid-gap);
  margin-top: var(--space-h2-text);
}

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

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