.drelona-gallery {
  --drelona-gallery-ink: #111827;
  --drelona-gallery-line: #d9dde4;
  position: relative;
  width: 48%;
  margin: 0 4% 2rem 0;
  float: left;
}

.drelona-gallery *,
.drelona-gallery *::before,
.drelona-gallery *::after {
  box-sizing: border-box;
}

.drelona-gallery__viewport {
  position: relative;
  min-width: 0;
  outline: none;
}

.drelona-gallery__viewport:focus-visible {
  outline: 2px solid var(--drelona-gallery-ink);
  outline-offset: 4px;
}

.drelona-gallery__track {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 16px;
  background: #f5f5f6;
}

.drelona-gallery__slide {
  display: none;
  width: 100%;
  height: 100%;
  margin: 0;
}

.drelona-gallery__slide.is-active {
  display: block;
}

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

.drelona-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .75rem;
}

.drelona-gallery__thumb {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 9px;
  background: #f5f5f6;
  cursor: pointer;
  opacity: .72;
}

.drelona-gallery__thumb:hover,
.drelona-gallery__thumb.is-active {
  border-color: var(--drelona-gallery-ink);
  opacity: 1;
}

.drelona-gallery__thumb:focus-visible {
  outline: 2px solid var(--drelona-gallery-ink);
  outline-offset: 3px;
}

.drelona-gallery__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.drelona-gallery__arrow,
.drelona-gallery__count {
  position: absolute;
  z-index: 2;
  border: 0;
  background: rgba(255, 255, 255, .92);
  color: var(--drelona-gallery-ink);
  box-shadow: 0 2px 12px rgba(17, 24, 39, .12);
}

.drelona-gallery__arrow {
  top: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
}

.drelona-gallery__arrow:disabled {
  opacity: .35;
  cursor: default;
}

.drelona-gallery__arrow--previous { left: .75rem; }
.drelona-gallery__arrow--next { right: .75rem; }

.drelona-gallery__count {
  right: .75rem;
  bottom: .75rem;
  margin: 0;
  padding: .38rem .65rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 767px) {
  .drelona-gallery {
    width: 100%;
    margin: 0 0 1.25rem;
    float: none;
  }

  .drelona-gallery__track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
  }

  .drelona-gallery__track::-webkit-scrollbar { display: none; }

  .drelona-gallery__slide,
  .drelona-gallery__slide.is-active {
    display: block;
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  .drelona-gallery__thumbs { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .drelona-gallery__track { scroll-behavior: auto; }
}