body.ds-gallery-viewer-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.ds-listing-gallery,
.ds-listing-gallery * {
  box-sizing: border-box;
}

.ds-listing-gallery {
  max-width: 100%;
  overflow: hidden;
}

.ds-listing-gallery__main,
.ds-listing-gallery__item {
  min-width: 0;
}

.ds-listing-gallery__main img,
.ds-listing-gallery__item img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-listing-gallery__count,
.ds-listing-gallery__action {
  min-width: 44px;
  min-height: 44px;
}

.ds-gallery-trigger {
  cursor: pointer;
  touch-action: manipulation;
}

.ds-gallery-viewer[hidden] {
  display: none;
}

.ds-gallery-viewer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  padding: 20px;
  padding-top: max(20px, env(safe-area-inset-top));
  padding-right: max(20px, env(safe-area-inset-right));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  padding-left: max(20px, env(safe-area-inset-left));
  overflow: hidden;
  color: #fff;
  background: rgba(8, 10, 14, 0.96);
}

.ds-gallery-viewer__close {
  grid-column: 1 / -1;
  justify-self: end;
  min-width: 44px;
  min-height: 44px;
}

.ds-gallery-viewer__figure {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  gap: 12px;
  align-content: center;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.ds-gallery-viewer__image {
  max-width: 100%;
  max-height: calc(100vh - 190px);
  max-height: calc(100dvh - 190px);
  object-fit: contain;
}

.ds-gallery-viewer__nav {
  grid-row: 2;
  align-self: center;
  min-width: 44px;
  min-height: 44px;
}

.ds-gallery-viewer__nav--prev {
  grid-column: 1;
}

.ds-gallery-viewer__nav--next {
  grid-column: 3;
}

.ds-gallery-viewer__close,
.ds-gallery-viewer__nav,
.ds-gallery-viewer__thumb {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.ds-gallery-viewer__close,
.ds-gallery-viewer__nav {
  padding: 10px 16px;
}

.ds-gallery-viewer__thumbs {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  max-height: 78px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.ds-gallery-viewer[data-ds-gallery-count="1"] .ds-gallery-viewer__nav,
.ds-gallery-viewer[data-ds-gallery-count="1"] .ds-gallery-viewer__thumbs {
  display: none;
}

.ds-gallery-viewer__thumb {
  flex: 0 0 auto;
  width: 82px;
  height: 62px;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
}

.ds-gallery-viewer__thumb.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28);
}

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

@media (max-width: 767px) {
  .ds-listing-gallery {
    display: grid;
    gap: 10px;
  }

  .ds-listing-gallery__main {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .ds-listing-gallery__strip {
    display: flex;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .ds-listing-gallery__strip > *,
  .ds-listing-gallery__item {
    flex: 0 0 34%;
    min-width: 112px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .ds-listing-gallery__count,
  .ds-listing-gallery__action {
    position: relative;
    z-index: 1;
  }

  .ds-gallery-viewer {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 12px;
    padding: 14px;
    padding-top: max(14px, env(safe-area-inset-top));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    padding-left: max(14px, env(safe-area-inset-left));
  }

  .ds-gallery-viewer__figure {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .ds-gallery-viewer__image {
    max-height: calc(100vh - 210px);
    max-height: calc(100dvh - 210px);
  }

  .ds-gallery-viewer__nav {
    grid-row: 3;
  }

  .ds-gallery-viewer__nav--prev {
    grid-column: 1;
    justify-self: start;
  }

  .ds-gallery-viewer__nav--next {
    grid-column: 2;
    justify-self: end;
  }

  .ds-gallery-viewer__thumbs {
    grid-row: 4;
    max-height: 70px;
  }

  .ds-gallery-viewer__thumb {
    width: 72px;
    height: 54px;
  }
}

@media (max-width: 479px) {
  .ds-listing-gallery__strip > *,
  .ds-listing-gallery__item {
    flex-basis: 42%;
    min-width: 104px;
  }

  .ds-gallery-viewer {
    gap: 10px;
  }

  .ds-gallery-viewer__close,
  .ds-gallery-viewer__nav {
    padding: 8px 12px;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .ds-gallery-viewer {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .ds-gallery-viewer__figure {
    grid-column: 2;
    grid-row: 2;
  }

  .ds-gallery-viewer__image {
    max-height: calc(100vh - 130px);
    max-height: calc(100dvh - 130px);
  }

  .ds-gallery-viewer__nav {
    grid-row: 2;
  }

  .ds-gallery-viewer__nav--prev {
    grid-column: 1;
  }

  .ds-gallery-viewer__nav--next {
    grid-column: 3;
  }

  .ds-gallery-viewer__thumbs {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}