:root {
  --total-items: 5;
  --animation-duration: 20s;
  --item-gap: 16px;
}

.scrolling {
  width: 100%;
  max-width: 1536px;
  position: relative;
  height: 280px;
  overflow: hidden;
  margin-top: 20px;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0));
}

@keyframes scrollleft {
  to {
    left: calc(-280px - var(--item-gap));
  }
}

@keyframes scrollleft-mobile {
  to {
    left: -212px;
  }
}

.item {
  width: 280px;
  height: 100%;
  background-color: transparent;
  border-radius: 14px;
  position: absolute;
  overflow: hidden;
  margin-right: var(--item-gap);
  left: max(calc((280px + var(--item-gap)) * (var(--total-items) - 1)), 100%);
  animation-name: scrollleft;
  animation-duration: var(--animation-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.item:hover {
  transform: scale(1.05);
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

.item1 {
  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 1) * -1);
}
.item2 {
  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 2) * -1);
}
.item3 {
  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 3) * -1);
}
.item4 {
  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 4) * -1);
}
.item5 {
  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 5) * -1);
}

@media (max-width: 768px) {
  .scrolling {
    height: 200px;
  }
  .item {
    width: 200px;
    margin-right: 12px;
    left: max(calc((200px + 12px) * (var(--total-items) - 1)), 100%);
    animation-name: scrollleft-mobile;
  }
}