:root {
  --2-tiles: calc(1 / 2 * 100%);
  --3-tiles: calc(1 / 3 * 100%);
  --4-tiles: calc(1 / 4 * 100%);
  --5-tiles: calc(1 / 5 * 100%);
  --6-tiles: calc(1 / 6 * 100%);
  --7-tiles: calc(1 / 7 * 100%);
  --8-tiles: calc(1 / 8 * 100%);
}

.slider-tile {
  padding-inline: min(2%, 6px);
}

.slider-tile--movie,
.slider-tile--tv,
.slider-tile--trailer,
.slider-tile--bonus,
.slider-tile--genre,
.slider-tile--spotlight {
  min-width: var(--2-tiles);
  max-width: var(--2-tiles);
}

.slider-tile--cast {
  min-width: var(--5-tiles);
  max-width: var(--5-tiles);
}

@media (max-width: 640px) {
  .slider-tile {
    padding-right: 2%;
    padding-bottom: 8px;
  }

  .slider-tile--movie,
  .slider-tile--tv,
  .slider-tile--spotlight {
    min-width: var(--3-tiles);
    max-width: var(--3-tiles);
  }

  .slider-tile--trailer,
  .slider-tile--bonus {
    min-width: var(--2-tiles);
    max-width: var(--2-tiles);
  }

  .slider-tile--cast {
    min-width: var(--4-tiles);
    max-width: var(--4-tiles);
  }
}

@media (min-width: 800px) {
  .slider-tile--movie,
  .slider-tile--tv,
  .slider-tile--trailer,
  .slider-tile--bonus,
  .slider-tile--genre,
  .slider-tile--spotlight {
    min-width: var(--3-tiles);
    max-width: var(--3-tiles);
  }

  .slider-tile--cast {
    min-width: var(--6-tiles);
    max-width: var(--6-tiles);
  }
}

@media (min-width: 1000px) {
  .slider-tile--movie,
  .slider-tile--tv,
  .slider-tile--trailer,
  .slider-tile--bonus,
  .slider-tile--genre,
  .slider-tile--spotlight {
    min-width: var(--4-tiles);
    max-width: var(--4-tiles);
  }

  .slider-tile--cast {
    min-width: var(--7-tiles);
    max-width: var(--7-tiles);
  }
}

@media (min-width: 1300px) {
  .slider-tile--movie,
  .slider-tile--tv,
  .slider-tile--trailer,
  .slider-tile--bonus,
  .slider-tile--genre,
  .slider-tile--spotlight {
    min-width: var(--5-tiles);
    max-width: var(--5-tiles);
  }

  .slider-tile--cast {
    min-width: var(--8-tiles);
    max-width: var(--8-tiles);
  }
}
