/* ==========================================================================
   Component: Instagram Works Marquee
   ========================================================================== */

.p-insta-works-marquee {
  --insta-works-marquee-visible: 2;
  --insta-works-marquee-gap: 12px;
  --insta-works-marquee-duration: 120s;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-bottom: var(--space-xl);
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-insta-works-marquee {
    --insta-works-marquee-visible: 6;
    --insta-works-marquee-gap: 16px;
  }
}

.p-insta-works-marquee__viewport {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 4%,
    #000 96%,
    transparent 100%
  );
}

.p-insta-works-marquee__track {
  display: flex;
  width: max-content;
  animation: cdg-insta-works-marquee-scroll var(--insta-works-marquee-duration, 120s) linear infinite;
  will-change: transform;
}

.p-insta-works-marquee__list {
  display: flex;
  flex-shrink: 0;
  gap: var(--insta-works-marquee-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-insta-works-marquee__list + .p-insta-works-marquee__list {
  padding-left: var(--insta-works-marquee-gap);
}

.p-insta-works-marquee__item {
  flex: 0 0
    calc(
      (100vw - (var(--insta-works-marquee-visible) - 1) * var(--insta-works-marquee-gap)) /
        var(--insta-works-marquee-visible)
    );
  width: calc(
    (100vw - (var(--insta-works-marquee-visible) - 1) * var(--insta-works-marquee-gap)) /
      var(--insta-works-marquee-visible)
  );
}

.p-insta-works-marquee__figure {
  margin: 0;
  /* Instagram投稿サイズ 1080×1350 */
  aspect-ratio: 1080 / 1350;
  overflow: hidden;
  border-radius: 2px;
  background-color: var(--color-white);
  box-shadow: 0 4px 20px rgb(0 0 0 / 6%);
}

.p-insta-works-marquee__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes cdg-insta-works-marquee-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-insta-works-marquee__track {
    animation: none;
    transform: translate3d(0, 0, 0);
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    gap: var(--insta-works-marquee-gap);
  }

  .p-insta-works-marquee__list + .p-insta-works-marquee__list {
    display: none;
  }

  .p-insta-works-marquee__viewport {
    mask-image: none;
  }
}