.image-marquee-section {
   background: transparent;
}

.image-marquee {
   background: transparent;
}

.image-marquee--full-bleed {
   width: 100vw;
   margin-left: calc(50% - 50vw);
}

.image-marquee__shell {
   position: relative;
   overflow: hidden;
   background: transparent;
}

.image-marquee__viewport {
   --image-marquee-gap: 18px;
   overflow-x: auto;
   scroll-behavior: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
   padding: 0 16px 0.5rem;
}

.image-marquee__viewport::-webkit-scrollbar {
   display: none;
}

.image-marquee__track {
   display: flex;
   gap: var(--image-marquee-gap);
   width: max-content;
}

.image-marquee__card {
   flex: 0 0 440px;
   width: 440px;
   border-radius: 24px;
   overflow: hidden;
   background: #eadccc;
   user-select: none;
}

.image-marquee__image {
   width: 440px;
   height: 300px;
   object-fit: cover;
   display: block;
   pointer-events: none;
}

.image-marquee__arrow {
   position: absolute;
   top: 50%;
   z-index: 3;
   width: 52px;
   height: 52px;
   border: 0;
   border-radius: 50%;
   transform: translateY(-50%);
   background: rgba(17, 17, 17, 0.7);
   color: #fff;
   font-size: 2rem;
   line-height: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: background-color 0.2s ease, transform 0.2s ease;
}

.image-marquee__arrow:hover,
.image-marquee__arrow:focus {
   background: rgba(17, 17, 17, 0.9);
}

.image-marquee__arrow--prev {
   left: 16px;
}

.image-marquee__arrow--next {
   right: 16px;
}

@media (max-width: 991.98px) {
   .image-marquee__card {
      flex-basis: 380px;
      width: 380px;
   }

   .image-marquee__image {
      width: 380px;
      height: 259px;
   }
}

@media (max-width: 767.98px) {
   .image-marquee__viewport {
      --image-marquee-gap: 14px;
      padding: 0 12px 0.5rem;
   }

   .image-marquee__card {
      flex-basis: calc(100vw - 72px);
      width: calc(100vw - 72px);
      max-width: 440px;
      border-radius: 20px;
   }

   .image-marquee__image {
      width: 100%;
      height: auto;
      aspect-ratio: 440 / 300;
   }

   .image-marquee__arrow {
      width: 44px;
      height: 44px;
      font-size: 1.6rem;
   }

   .image-marquee__arrow--prev {
      left: 12px;
   }

   .image-marquee__arrow--next {
      right: 12px;
   }
}