.games-slider__swiper {
  position: relative;
  padding-block-end: 0.5rem;
}

/*
 * Swiper's own default CSS gives .swiper-wrapper/.swiper-slide
 * `height: 100%`. On this page that percentage resolves against the
 * viewport height (through the html/body `height: 100%` reset) instead of
 * the card content, so every slide balloons to the full viewport height
 * with a huge empty gap before the "Hrát nyní" button. This file loads
 * after Swiper's own stylesheet, so the same-specificity rule below wins
 * and the slide goes back to sizing from its actual content.
 */
.games-slider__swiper .swiper-wrapper,
.games-slider__swiper .swiper-slide {
  height: auto;
}

.game-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  padding: 0.75rem;
}

.game-card__image {
  width: 100%;
  /* The width/height HTML attributes (315×236, for CLS prevention) count
     as an explicit CSS height too, which would otherwise leave aspect-ratio
     with nothing to compute — `height: auto` frees the height back up so
     aspect-ratio can derive it from the (now 100%-wide) box.
     Real source files are all 315×236 (a landscape ~4:3 ratio), not
     square. Forcing a 1:1 box here was letterboxing every thumbnail —
     `object-fit: contain` fit the whole image in, but left empty bars
     above and below because the box didn't match the picture's shape.
     Matching the box to the real ratio removes that gap while still
     showing the image whole (no cropping). */
  height: auto;
  aspect-ratio: 315 / 236;
  object-fit: contain;
  background: var(--color-bg-primary);
  border-radius: calc(var(--radius-card) - 2px);
  margin-block-end: 0.75rem;
}

.game-card__name {
  flex-grow: 1;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  margin-block-end: 0.875rem;
}

.game-card__play {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
}

.games-slider__nav.swiper-button-disabled {
  opacity: 0.35;
}

.games-slider__nav::after {
  font-size: 1rem;
  color: var(--color-text-on-light-btn);
}

.games-slider__nav {
  width: 36px;
  height: 36px;
  background: var(--color-accent-yellow);
  border-radius: 50%;
}

@media (max-width: 767px) {
  .games-slider__nav {
    display: none;
  }
}