:root {
  --promo-grid-gap: 18px;
  --promo-grid-radius: 20px;
}
.promo-grid-section { padding-block: 16px 36px; background: var(--tw-surface); }
.promo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--promo-grid-gap); align-items: start; }
.promo-tile { display: block; min-width: 0; overflow: hidden; border-radius: var(--promo-grid-radius); transition: transform .2s ease, box-shadow .2s ease; }
.promo-tile img { display: block; width: 100%; height: auto; }
@media (hover: hover) and (pointer: fine) { .promo-tile:hover { transform: translateY(-4px); box-shadow: var(--tw-shadow); } }
@media (max-width: 767px) { .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .promo-tile { border-radius: 13px; } }
@media (prefers-reduced-motion: reduce) { .promo-tile { transition: none; } .promo-tile:hover { transform: none; } }