.fantasy-hero-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(168px, 1fr));
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.fantasy-hero-row::-webkit-scrollbar {
  display: none;
}

.fantasy-hero-tile {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  background: #151820;
}

@media (min-width: 640px) {
  .fantasy-hero-row {
    gap: 16px;
    grid-template-columns: repeat(8, minmax(190px, 1fr));
  }

  .fantasy-hero-tile {
    border-radius: 18px;
  }
}

@media (min-width: 1280px) {
  .fantasy-hero-row {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    overflow: visible;
  }

  .fantasy-hero-tile {
    border-radius: 20px;
  }
}