@charset "UTF-8";

/* =====================================================
  GALLERY SLIDER
===================================================== */

.fd-gallery{
  position:relative;
}

.fd-gallery__slider{
  width:100%;
}

.fd-gallery__viewport{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
  user-select:none;
  touch-action:pan-y;
  padding-bottom:2px;
  scroll-behavior:auto;
}

.fd-gallery__viewport::-webkit-scrollbar{
  display:none;
}

.fd-gallery__viewport.is-dragging,
.fd-gallery__viewport.is-drag-intent{
  cursor:grabbing;
}

.fd-gallery__track{
  display:flex;
  align-items:stretch;
  gap:12px;
  padding:0 40px;
  width:max-content;
}

.fd-gallery__item{
  flex:0 0 auto;
  width:clamp(280px, 32vw, 520px);
  margin:0;
  overflow:hidden;
  background:#ece9e4;
  position:relative;
}

.fd-gallery__item img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  vertical-align:bottom;
  filter:
    contrast(.96)
    brightness(.985)
    saturate(.97);
  transition:
    transform .9s cubic-bezier(.22,.61,.36,1),
    filter .45s ease,
    opacity .45s ease;
  transform:scale(1.0001);
}

.fd-gallery__item:hover img{
  transform:scale(1.018);
  filter:
    contrast(.98)
    brightness(.99)
    saturate(.99);
}

.fd-gallery__viewport.is-dragging .fd-gallery__item img,
.fd-gallery__viewport.is-drag-intent .fd-gallery__item img{
  transform:scale(1.003);
  transition:none;
}

.fd-gallery__item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.02) 0%,
    rgba(255,255,255,0) 36%,
    rgba(0,0,0,.03) 100%
  );
  pointer-events:none;
}

/* =====================================================
  TABLET
===================================================== */

@media (max-width:1024px){

  .fd-gallery__track{
    gap:10px;
    padding:0 28px;
  }

  .fd-gallery__item{
    width:clamp(260px, 58vw, 460px);
  }

}

/* =====================================================
  MOBILE
===================================================== */

@media (max-width:767px){

  .fd-gallery__track{
    gap:8px;
    padding:0 20px;
  }

  .fd-gallery__item{
    width:min(82vw, 360px);
  }

  .fd-gallery__item:hover img{
    transform:none;
  }

}

/* =====================================================
  REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce){

  .fd-gallery__item img{
    transition:none;
  }

}