.promo-heading-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.promo-controls {
  display: flex;
  gap: 8px;
}

.promo-controls button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 211, 106, .55);
  border-radius: 50%;
  background: #0d0f13;
  color: var(--cream);
  font-size: 1.2rem;
  cursor: pointer;
  transition: .2s;
}

.promo-controls button:hover,
.promo-controls button:focus-visible {
  background: var(--orange);
  color: #160b02;
  outline: none;
  transform: translateY(-2px);
}

.promo-grid {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px 2px 12px;
}

.promo-grid::-webkit-scrollbar { display: none; }
.promo-card { scroll-snap-align: start; }

@media (max-width: 930px) {
  .promo-grid {
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 20px) / 2);
  }
}

@media (max-width: 700px) {
  .promo-heading-actions {
    display: grid;
    justify-items: end;
    gap: 8px;
  }

  .promo-controls button {
    width: 40px;
    height: 40px;
  }

  .promo-grid {
    grid-template-columns: none;
    gap: 14px;
    grid-auto-columns: min(82vw, 310px);
  }

  .promo-card { display: block; }
  .promo-card img { aspect-ratio: 1 / 1; height: auto; }
  .promo-card span {
    position: absolute;
    display: block;
    padding: 3rem 1rem 1rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, .95));
    font-size: 1rem;
  }
}