.games-slider {
  margin-top: var(--space-heading-text);
  padding-bottom: 2.5rem;
  position: relative;
}

/* Higher specificity than the Swiper library's own `.swiper-slide { width: 100% }`
   rule, so our fixed thumbnail width always wins regardless of CSS load order. */
.games-slider .games-slider__slide {
  flex-shrink: 0;
  height: auto;
  width: 130px;
}
@media (min-width: 768px) {
  .games-slider .games-slider__slide {
    width: 150px;
  }
}

.game-card {
  background: var(--color-card-bg);
  clip-path: var(--clip-panel);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
}

.game-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 267 / 400;
  object-fit: contain;
}

.game-card__name {
  color: var(--color-white);
  font-weight: var(--fw-btn);
  font-size: var(--fs-small);
}

.game-card__play {
  margin-top: auto;
  padding-block: 0.6rem;
  font-size: var(--fs-small);
  width: 100%;
}

.games-slider .swiper-button-prev,
.games-slider .swiper-button-next {
  color: var(--color-heading-accent);
  width: 2.25rem;
  height: 2.25rem;
  background: var(--color-bg-dark);
  clip-path: var(--clip-panel);
}
.games-slider .swiper-button-prev::after,
.games-slider .swiper-button-next::after {
  font-size: 1rem;
}