.galleryslider {
  --galleryslider-accent: #9a7049;
  --galleryslider-surface: #ded8cf;
  --galleryslider-text: #1d1f1d;
  --galleryslider-muted: #6f706d;
  --galleryslider-overlay: rgba(12, 14, 12, .66);
  width: 100%;
  margin-block: clamp(2rem, 5vw, 5rem);
  color: var(--galleryslider-text);
  font: inherit;
}

.galleryslider--category {
  max-width: 70rem;
  margin-inline: auto;
}

.category-desc:has(.galleryslider--replaces-category-image) > img:first-child {
  display: none;
}

.galleryslider,
.galleryslider * {
  box-sizing: border-box;
}

.galleryslider--dark {
  --galleryslider-accent: #d4ad86;
  --galleryslider-surface: #262925;
  --galleryslider-text: #f5f2ec;
  --galleryslider-muted: #bbbcb6;
}

.galleryslider__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}

.galleryslider__heading p {
  margin: 0 0 .35rem;
  color: var(--galleryslider-muted);
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.galleryslider__heading h2 {
  margin: 0;
  color: var(--galleryslider-text);
  font: inherit;
  font-size: clamp(1.75rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.05;
}

.galleryslider__carousel {
  position: relative;
}

.galleryslider__stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--galleryslider-surface);
}

.galleryslider--16x9 .galleryslider__stage { aspect-ratio: 16 / 9; }
.galleryslider--3x2 .galleryslider__stage { aspect-ratio: 3 / 2; }
.galleryslider--4x3 .galleryslider__stage { aspect-ratio: 4 / 3; }
.galleryslider--1x1 .galleryslider__stage { aspect-ratio: 1 / 1; }

.galleryslider__main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  cursor: zoom-in;
  touch-action: pan-y;
}

.galleryslider__main::after {
  content: "";
  position: absolute;
  inset: 52% 0 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--galleryslider-overlay));
}

.galleryslider__main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease, opacity .2s ease;
}

.galleryslider__main:hover img {
  transform: scale(1.012);
}

.galleryslider__main:focus-visible,
.galleryslider__thumbs button:focus-visible,
.galleryslider__control:focus-visible,
.galleryslider__dialog button:focus-visible {
  outline: 3px solid var(--galleryslider-accent);
  outline-offset: 3px;
}

.galleryslider__main > span {
  position: absolute;
  z-index: 2;
  left: clamp(1rem, 3vw, 2rem);
  right: 8rem;
  bottom: clamp(1rem, 3vw, 2rem);
  color: #fff;
  font-size: clamp(.8rem, 1.5vw, 1rem);
  line-height: 1.5;
  text-align: left;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

.galleryslider__control,
.galleryslider__dialog-close,
.galleryslider__dialog-control {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: rgba(18, 20, 18, .62);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
}

.galleryslider__control:hover,
.galleryslider__dialog-close:hover,
.galleryslider__dialog-control:hover {
  border-color: #fff;
  background: rgba(18, 20, 18, .88);
}

.galleryslider__control {
  top: 50%;
  transform: translateY(-50%);
}

.galleryslider__control--previous { left: clamp(.65rem, 2vw, 1.25rem); }
.galleryslider__control--next { right: clamp(.65rem, 2vw, 1.25rem); }

.galleryslider__counter {
  position: absolute;
  z-index: 3;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  min-width: 4.5rem;
  color: #fff;
  font-size: .75rem;
  letter-spacing: .08em;
  text-align: right;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

.galleryslider__thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(7rem, 10rem);
  gap: .75rem;
  margin-top: .875rem;
  padding: .125rem 0 .625rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scroll-snap-type: inline mandatory;
}

.galleryslider__thumbs[hidden] {
  display: none;
}

.galleryslider__thumbs button {
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 0;
  background: var(--galleryslider-surface);
  cursor: pointer;
  opacity: .58;
  scroll-snap-align: start;
  transition: border-color .2s ease, opacity .2s ease;
}

.galleryslider__thumbs button:hover { opacity: .86; }
.galleryslider__thumbs button[aria-current="true"] { border-color: var(--galleryslider-accent); opacity: 1; }

.galleryslider__thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galleryslider__dialog {
  width: min(78rem, 96vw);
  height: min(56rem, 94vh);
  max-width: none;
  max-height: none;
  padding: 3.75rem 4.5rem 3.25rem;
  border: 0;
  background: #111311;
  color: #fff;
  touch-action: pan-y;
}

.galleryslider__dialog::backdrop {
  background: rgba(6, 7, 6, .9);
}

.galleryslider__dialog figure {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
}

.galleryslider__dialog figure img {
  max-width: 100%;
  max-height: calc(100% - 2.75rem);
  object-fit: contain;
}

.galleryslider__dialog figcaption {
  min-height: 1.25rem;
  margin-top: .875rem;
  color: rgba(255, 255, 255, .76);
  font-size: .85rem;
  text-align: center;
}

.galleryslider__dialog-close {
  top: 1rem;
  right: 1rem;
  font-size: 1.75rem;
}

.galleryslider__dialog-control {
  top: 50%;
  transform: translateY(-50%);
}

.galleryslider__dialog-control--previous { left: .75rem; }
.galleryslider__dialog-control--next { right: .75rem; }

.galleryslider__dialog-counter {
  position: absolute;
  top: 1.65rem;
  left: 1.4rem;
  color: rgba(255, 255, 255, .72);
  font-size: .75rem;
  letter-spacing: .08em;
}

@media (max-width: 42rem) {
  .galleryslider__heading {
    display: block;
  }

  .galleryslider__main > span {
    right: 5.5rem;
  }

  .galleryslider__control,
  .galleryslider__dialog-close,
  .galleryslider__dialog-control {
    width: 2.5rem;
    height: 2.5rem;
  }

  .galleryslider__thumbs {
    grid-auto-columns: 5.75rem;
    gap: .5rem;
  }

  .galleryslider__dialog {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: 3.5rem .625rem 4.5rem;
  }

  .galleryslider__dialog-control {
    top: auto;
    bottom: .875rem;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .galleryslider__main img,
  .galleryslider__thumbs button {
    transition: none;
  }
}