.promotion-related {
  overflow: hidden;
}

.promotion-related > header{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:13px}.promotion-related > header h2{margin:3px 0}.promotion-related > header nav{display:flex;align-items:center;gap:8px}.promotion-related > header nav button{display:grid;place-items:center;width:42px;height:42px;border:1px solid #ffc59d;border-radius:14px;background:#fff;color:#c65312;box-shadow:0 7px 16px #14213d12;cursor:pointer;transition:.2s ease}.promotion-related > header nav button:hover:not(:disabled){background:#ff6508;color:#fff;transform:translateY(-2px)}.promotion-related > header nav button:disabled{opacity:.35;cursor:not-allowed}.promotion-related > header nav small{min-width:48px;text-align:center;color:#667085;font-weight:800}.promotion-related > header nav small b{color:#ff6508;font-size:16px}.promotion-carousel-progress{height:5px;overflow:hidden;margin:0 2px;border-radius:20px;background:#ffe8d8}.promotion-carousel-progress i{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff6508,#ffab6f,#315f8d);transform:scaleX(.2);transform-origin:right center;transition:transform .25s ease}

.promotion-related .promotions-grid {
  display: flex;
  grid-template-columns: none;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  padding: 4px 2px 22px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.promotion-related .promotions-grid::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.promotion-related .promotion-card {
  flex: 0 0 min(420px, 78vw);
  width: min(420px, 78vw);
  scroll-snap-align: start;
}

@media (max-width: 560px) {
  .promotion-related > header nav small{display:none}.promotion-related > header nav button{width:38px;height:38px}
  .promotion-related .promotion-card {
    flex-basis: 86vw;
    width: 86vw;
  }
}