.vim-wrapper {
  --vim-height: 680px;
  --vim-gap: 18px;
  --vim-mobile-gap: 12px;
  --vim-radius: 10px;
  --vim-speed: 34s;
  --vim-aspect-ratio: 2 / 3;

  width: 100%;
  height: var(--vim-height);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.vim-grid {
  display: grid;
  gap: var(--vim-gap);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.vim-grid-desktop {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vim-grid-mobile {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vim-column {
  position: relative;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--vim-radius);
  -webkit-touch-callout: none;
}

.vim-track {
  display: flex;
  flex-direction: column;
  gap: var(--vim-gap);
  will-change: transform;
  animation-duration: var(--vim-speed);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.vim-scroll-up .vim-track {
  animation-name: vim-scroll-up;
}

.vim-scroll-down .vim-track {
  animation-name: vim-scroll-down;
}

@media (hover: hover) and (pointer: fine) {
  .vim-column:hover .vim-track,
  .vim-column:focus-within .vim-track {
    animation-play-state: paused;
  }
}

.vim-item,
.vim-link {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: var(--vim-aspect-ratio);
  height: auto !important;
  overflow: hidden;
  border-radius: var(--vim-radius);
  line-height: 0;
  background: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.vim-image {
  display: block;
  width: 100%;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain;
  object-position: center;
  border-radius: var(--vim-radius);
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.vim-has-shadow .vim-item,
.vim-has-shadow .vim-link {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

@keyframes vim-scroll-up {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-50% - (var(--vim-gap) / 2))); }
}

@keyframes vim-scroll-down {
  from { transform: translateY(calc(-50% - (var(--vim-gap) / 2))); }
  to { transform: translateY(0); }
}

@media (max-width: 980px) {
  .vim-grid-desktop {
    display: none;
  }

  .vim-grid-mobile {
    display: grid;
    gap: var(--vim-mobile-gap);
  }

  .vim-grid-mobile .vim-track {
    gap: var(--vim-mobile-gap);
  }
}

@media (max-width: 480px) {
  .vim-wrapper {
    --vim-mobile-gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vim-track {
    animation: none !important;
  }
}