@charset "UTF-8";
.hscroll__sticky { padding-block: 40px; }		
.hscroll {
  --hscroll-gap: 0;
  --hscroll-pad: 0;
  --hscroll-ratio: 345 / 644;
  --hscroll-height: auto;
  position: relative;
}

.hscroll__track {
  display: flex;
  gap: var(--hscroll-gap);
  padding-inline: var(--hscroll-pad);
}

.hscroll__panel {
--hscroll-panel-w: auto;
  flex: 0 0 auto;
		width: 100%;
}

@media (min-width: 641px) {
  .hscroll__sticky {
    display: flex;
    align-items: center;
				flex-wrap: wrap;
  }
  .hscroll__track {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: var(--hscroll-gap);
    margin-inline: auto;
  }
}


@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
.hscroll__sticky { padding-block: 20px; }
  .hscroll {
    height: calc(var(--hscroll-pin-h, var(--hscroll-height)) + var(--hscroll-distance, 0px));
  }

  .hscroll__sticky {
    position: sticky;
    top: 0;
    aspect-ratio: var(--hscroll-ratio, auto);
    height: var(--hscroll-height, auto);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
				flex-wrap: wrap;
				width: 100%;
  }

  .hscroll__track {
    transform: translate3d(var(--hscroll-x, 0px), 0, 0);
    will-change: transform;
  }

  .hscroll__panel {
    width: 250%;
  }
}


@media (prefers-reduced-motion: no-preference) {
  .hscroll__reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity   var(--hscroll-dur, .6s) cubic-bezier(.22, .61, .36, 1),
      transform var(--hscroll-dur, .6s) cubic-bezier(.22, .61, .36, 1);
    transition-delay: calc(var(--i, 0) * var(--hscroll-stagger, 90ms));
  }

  .hscroll__reveal.is-inview,
  .is-inview .hscroll__reveal {
    opacity: 1;
    transform: none;
  }

  .hscroll__reveal--right { transform: translateX(40px); }
  .hscroll__reveal--left  { transform: translateX(-40px); }
  .hscroll__reveal--zoom  { transform: scale(.88); }
  .hscroll__reveal--blur  { filter: blur(6px); transition-property: opacity, transform, filter; }
  .hscroll__reveal--blur.is-inview,
  .is-inview .hscroll__reveal--blur { filter: none; }

  .hscroll__scrub {
    opacity: var(--hscroll-p, 0);
    transform: translateY(calc((1 - var(--hscroll-p, 0)) * 24px));
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .hscroll__sticky {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .hscroll__track {
    transform: none;
  }
  .hscroll__panel {
    width: var(--hscroll-panel-w, 100%);
    scroll-snap-align: center;
  }
}