.carousel-shell {
  position: relative;
}

.carousel {
  --tiles-visible: 6.5;
  --tile-gap: 0.8rem;
  --tile-max-width: 250px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(
    var(--tile-max-width),
    calc((100% - ((var(--tiles-visible) - 1) * var(--tile-gap))) / var(--tiles-visible))
  );
  gap: var(--tile-gap);
  overflow-x: auto;
  padding-bottom: 0.45rem;
  scroll-behavior: smooth;
  justify-content: start;
}

.carousel::-webkit-scrollbar {
  height: 8px;
}

.carousel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

.carousel-arrow {
  position: absolute;
  top: calc(50% - 18px);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(15, 17, 21, 0.84);
  color: #fff;
  z-index: 3;
  cursor: pointer;
}

.carousel-arrow.left {
  left: -14px;
}

.carousel-arrow.right {
  right: -14px;
}

.skeleton {
  border-radius: 12px;
  aspect-ratio: 16 / 9;
  background: linear-gradient(90deg, #1b2333 20%, #202a3f 50%, #1b2333 80%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (max-width: 1100px) {
  .carousel {
    --tiles-visible: 4.5;
  }
}

@media (max-width: 760px) {
  .carousel {
    --tiles-visible: 1.2;
    --tile-max-width: none;
    grid-auto-columns: calc((100% - ((var(--tiles-visible) - 1) * var(--tile-gap))) / var(--tiles-visible));
  }

  .carousel-arrow {
    display: none;
  }
}