.production-gallery {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -ms-scrollbar-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
  margin-left: calc(var(--page-margin) * -1);
  margin-right: calc(var(--page-margin) * -1);
}

.production-gallery::-webkit-scrollbar {
  display: none;
}

.production-gallery__image {
  -o-object-fit: cover;
  object-fit: cover;
  object-position: center;
  border-radius: var(--b-radius);
  width: auto;
  height: 55.56vw;
  aspect-ratio: 320 / 200;
  min-height: 200px;
  max-height: 400px;
  @media (min-width: 1280px) {
    width: 100%;
    height: 100%;
    min-height: unset;
    max-height: unset;
  }
}

body:has(.production-gallery) .section__detail-text-img {
  @media (max-width: 768px) {
    display: block;
  }
}

.section__wrapper .production-gallery + .section__detail-text {
  margin-top: 90px;
  @media (min-width: 768px) {
    margin-top: 120px;
  }
  @media (min-width: 1900px) {
    margin-top: 130px;
  }
}

@media (max-width: 1280px) {
  .bx-touch {
    .production-gallery {
      scroll-snap-type: x mandatory;
    }
    .production-gallery__item {
      padding-left: var(--page-margin);
      scroll-snap-align: start;
    }
  }
}

@media (min-width: 1280px) {
  .production-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 20px;
    height: 872px;
    overflow: unset;
  }

  .production-gallery__item {
    padding-left: 0;
    scroll-snap-align: unset;
    transition: transform 0.5s ease-out;
  }

  .production-gallery__item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    transform: translateX(calc(100% + 20px));
  }

  .production-gallery__item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / -1;
    position: relative;
    z-index: 2;
  }

  .production-gallery__item:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 2 / 4;
    width: 80%;
    transform: translateX(calc((100% + 20px) * -1));
    transition-delay: 0.1s;
  }

  .production-gallery__item:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 3 / 5;
    width: 80%;
    justify-self: end;
    transform: translateX(calc(100% + 20px));
    transition-delay: 0.2s;
  }

  .production-gallery__item:nth-child(5) {
    grid-column: 3 / 4;
    grid-row: 4 / 6;
    transform: translateX(calc((100% + 20px) * -1));
    transition-delay: 0.3s;
  }
  .production-gallery_animated .production-gallery__item {
    transform: translateX(0);
  }
}