body:not(.VIM-exclude) {
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}

:root {
  --VIM-grid-horizontal-spacing: 0.5rem;
  --VIM-grid-vertical-spacing: 0.5rem;
  --VIM-color-slider-button-text: #121212;
  --VIM-color-slider-button: #ffffff;
  --VIM-color-modal-background: 255, 255, 255;
  --VIM-color-modal-foreground: 40, 42, 46;
  --VIM-arrow-size: 1;
  --VIM-corner-radius: 0;
  --VIM-sticky-top: 2rem;
}

.VIM-fullwidth {
  /* left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw; */
}

.VIM-slider-wrapper {
  overflow: hidden;
  position: relative;
}

@media screen and (min-width: 750px) {
  .VIM-grid {
    display: grid;
    grid-template-columns: repeat(var(--desktop-columns), 1fr);
    gap: var(--VIM-grid-vertical-spacing) var(--VIM-grid-horizontal-spacing);
  }

  .VIM-stacked {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--VIM-grid-vertical-spacing) var(--VIM-grid-horizontal-spacing);
  }

  .VIM-slider,
  .VIM-thumbnail {
    display: flex;
    position: relative;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-right: 0;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding: 0;
    list-style: none;
    gap: 1px;
    z-index: 0;
  }

  /* .VIM-slider {
    align-items: flex-start;
  } */

  .VIM-thumbnail {
    scroll-padding-right: var(--VIM-grid-horizontal-spacing);
  }

  .VIM-thumbnail:where(.left, .right) {
    scroll-padding-right: 0;
    scroll-padding-top: var(--VIM-grid-horizontal-spacing);
  }

  .VIM-gallery:not(.VIM-slider) ~ *,
  .VIM-thumbnail:not(.VIM-t-slider),
  .VIM-t-slider.none {
    display: none !important;
  }

  .VIM-stacked > .widened {
    grid-column: 1 / span 2;
  }
}

@media screen and (max-width: 749px) {
  .VIM-mobile-slider,
  .VIM-thumbnail {
    display: flex;
    position: relative;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-right: var(--VIM-grid-horizontal-spacing);
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding: 0;
    list-style: none;
    gap: 1px;
  }

  .VIM-mobile-stacked {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--VIM-grid-vertical-spacing) var(--VIM-grid-horizontal-spacing);
  }

  .VIM-mobile-grid {
    display: grid;
    grid-template-columns: repeat(var(--mobile-columns), 1fr);
    gap: var(--VIM-grid-vertical-spacing) var(--VIM-grid-horizontal-spacing);
  }

  .VIM-gallery:not(.VIM-mobile-slider) ~ *,
  .VIM-thumbnail:not(.VIM-t-mobile-slider),
  .VIM-t-mobile-slider.none {
    display: none !important;
  }

  .VIM-mobile-stacked > .widened {
    grid-column: 1 / span 2;
  }
}

.VIM-gallery {
  flex-grow: 1;
}

.VIM-gallery::after,
.VIM-thumbnail::after {
  margin-left: calc(1 * var(--VIM-grid-horizontal-spacing));
  content: '';
  width: 0;
  padding-left: 0rem;
}

.VIM-slide-item {
  box-sizing: content-box;
  width: 100%;
  margin: 0;
  scroll-snap-align: start;
  flex-shrink: 0;
  padding-bottom: 0;
  flex-grow: 1;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.VIM-media-wrapper {
  display: flex;
  gap: var(--VIM-grid-horizontal-spacing);
  flex-direction: column;
  width: 100%;
  margin-bottom: 2rem;
}

@keyframes skeletonBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.VIM-thumbnail {
  gap: var(--VIM-grid-horizontal-spacing);
}

.VIM-thumbnail-item {
  box-sizing: content-box;
  margin: 0;
  scroll-snap-align: start;
  padding-bottom: 0;
  width: calc(
    (
        100% -
          ((var(--thumbnail-count) - 1) * var(--VIM-grid-horizontal-spacing)) -
          4px
      ) / var(--thumbnail-count)
  );
  min-width: calc(
    (
        100% -
          ((var(--thumbnail-count) - 1) * var(--VIM-grid-horizontal-spacing)) -
          4px
      ) / var(--thumbnail-count)
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid;
  border-radius: calc(var(--VIM-corner-radius) * 0.75);
  overflow: hidden;
  cursor: pointer;
}

.VIM-thumbnail-item:not(.active) {
  border-color: transparent;
}

[data-alt] {
  order: unset !important;
}

.VIM-bin {
  display: none;
  position: absolute;
  visibility: hidden;
  width: 0;
  height: 0;
  z-index: -10;
  top: 0;
  left: 0;
}

@media (min-width: 990px) {
  .VIM-media-wrapper {
    margin-bottom: 5rem;
  }

  .VIM-media-wrapper.VIM-sticky {
    position: sticky;
    top: var(--VIM-sticky-top);
  }

  .VIM-media-wrapper.right {
    flex-direction: row;
  }

  .VIM-media-wrapper.left {
    flex-direction: row-reverse;
  }

  .VIM-media-wrapper:where(.left, .right) .VIM-thumbnail {
    flex-direction: column;
  }

  .VIM-media-wrapper:where(.left, .right) .VIM-thumbnail-item {
    width: calc(100% - 4px);
    min-width: calc(100% - 4px);
    height: calc(
      (
          100% -
            ((var(--thumbnail-count) - 1) * var(--VIM-grid-horizontal-spacing)) -
            4px
        ) / var(--thumbnail-count)
    );
    min-height: calc(
      (
          100% -
            ((var(--thumbnail-count) - 1) * var(--VIM-grid-horizontal-spacing)) -
            4px
        ) / var(--thumbnail-count)
    );
  }

  .VIM-media-wrapper:where(.left, .right) .VIM-slider-wrapper {
    flex: 1 1 calc(85% - var(--VIM-grid-horizontal-spacing));
  }

  .VIM-thumbnail:not(.bottom) {
    flex: 0 0 15%;
  }
}

.VIM-slide-image-container {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--VIM-corner-radius);
}

.VIM-slide-image-container.adapt {
  display: flex;
  align-items: stretch;
}

.VIM-slide-image-container.adapt::before {
  content: '';
  height: 0;
  width: 0;
  padding-top: calc(100% / var(--VIM-aspect-ratio));
}

.VIM-thumbnail-item .VIM-slide-image-container {
  border-radius: unset;
}

.VIM-thumbnail:where(.left, .right) .VIM-slide-video-container.portrait,
.VIM-thumbnail-item .portrait,
.VIM-slide-item .portrait {
  padding-top: 125%;
}

.VIM-thumbnail:where(.left, .right) .VIM-slide-video-container.square,
.VIM-thumbnail-item .square,
.VIM-slide-item .square {
  padding-top: 100%;
}

.VIM-thumbnail:where(.left, .right)
  .VIM-slide-video-container:where(.landscape, .adapt),
.VIM-thumbnail-item .landscape,
.VIM-slide-item .landscape {
  padding-top: 56.25%;
}

.VIM-thumbnail-item .adapt,
.VIM-slide-item .adapt {
  padding-top: unset;
}

.VIM-slide-video-container.adapt {
  padding-top: unset;
  height: 100%;
}

.VIM-thumbnail-item .VIM-slide-image-container {
  height: 100%;
}

.VIM-slide-image {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* cursor: pointer; */
}

.VIM-slide-video {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border: none;
}

._pswp__content .VIM-slide-video {
  width: auto;
  height: auto;
  max-height: 90%;
  max-width: 90%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

._pswp__content model-viewer.VIM-slide-video {
  width: 100%;
  height: 100%;
}

.VIM-slide-image-container.adapt iframe,
.VIM-slide-image-container.adapt .VIM-slide-image {
  position: unset;
  height: 100%;
}

.VIM-gallery::-webkit-scrollbar,
.VIM-modal-image-container::-webkit-scrollbar,
.VIM-thumbnail::-webkit-scrollbar {
  display: none !important;
}

.VIM-gallery::-webkit-scrollbar-thumb,
.VIM-modal-image-container::-webkit-scrollbar-thumb,
.VIM-thumbnail::-webkit-scrollbar-thumb {
  display: none !important;
}

.VIM-gallery::-webkit-scrollbar-track,
.VIM-modal-image-container::-webkit-scrollbar-track,
.VIM-thumbnail::-webkit-scrollbar-track {
  display: none !important;
}

.VIM-slider-button > * {
  width: calc(1rem * var(--VIM-arrow-size));
  height: calc(1rem * var(--VIM-arrow-size));
  color: var(--VIM-arrow-fill);
  fill: var(--VIM-arrow-fill);
  stroke: var(--VIM-arrow-stroke);
}

.VIM-slider-controls {
  width: calc(100% - 2rem);
  position: absolute;
  right: 1rem;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  z-index: 1;
  /* opacity: 0;
  visibility: hidden; */
  transition: opacity 1s ease-in-out;
  display: none;
}

.VIM-media-wrapper:hover .VIM-slider-controls {
  opacity: 1;
  visibility: visible;
}

.VIM-slider-controls.end {
  justify-content: flex-end;
}

.VIM-slider-button {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  gap: 0.5rem;
  z-index: 1;
  color: var(--VIM-color-slider-button-text);
  background-color: var(--VIM-color-slider-button);
  border: none;
  cursor: pointer;
  pointer-events: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 0.05rem #cccccc);
}

[name='VIM-previous'] {
  left: 1rem;
}

[name='VIM-next'] {
  right: 1rem;
}

.VIM-slider-button--square,
.VIM-slider-button--circle {
  width: calc(1rem * var(--VIM-arrow-size) + 1.5rem);
  height: calc(1rem * var(--VIM-arrow-size) + 1.5rem);
}

.VIM-slider-button--circle {
  border-radius: 50%;
}

.VIM-slider-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 1s ease-in-out;
}

.VIM-slider-dot {
  overflow: hidden;
  width: 1rem;
  height: 1rem;
  border: 1px var(--VIM-color-slider-button-text) solid;
  border-radius: 50%;
  background-color: var(--VIM-color-slider-button);
  opacity: 0.7;
  transition: width 1s ease-in-out, opacity 1s ease-in-out;
  display: block !important;
  /* box-shadow: 0 0 3rem var(--VIM-color-slider-button-text); */
}

.VIM-slider-dot.active {
  width: 1.5rem;
  border-radius: 30px;
  opacity: 1;
}

.VIM-slider-button[disabled],
.VIM-slider-button[disabled] .VIM-icon,
.VIM-slider-button[disabled] svg {
  opacity: 0.3;
  cursor: not-allowed;
}

button[name='VIM-previous'] svg {
  transform: rotateY(180deg);
}

.VIM-slide-zoom {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-50%, -50%);
  transition: all 0.25s ease;
  opacity: 0;
  cursor: pointer;
  line-height: 0;
}

.VIM-slide-image-container:hover .VIM-slide-zoom {
  opacity: 1;
}

.VIM-slide-ptsw {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.VIM-slide-zoom svg {
  color: var(--VIM-color-slider-button);
  width: 2.5rem;
  height: unset;
  filter: drop-shadow(0 0 1rem var(--VIM-color-slider-button-text));
}

.VIM-slide-item .autoplaying {
  display: none;
}

.VIM-slide-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 0px;
  cursor: pointer;
}

.VIM-slide-play svg {
  width: calc(1rem * var(--VIM-arrow-size) + 1.5rem);
  height: calc(1rem * var(--VIM-arrow-size) + 1.5rem);
}

.VIM-modal {
  background-color: rgb(var(--VIM-color-modal-background));
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  z-index: -1;
}

.VIM-modal[open] {
  visibility: visible;
  opacity: 1;
  z-index: 99999999;
}

.VIM-modal-inner {
  display: flex;
  align-items: center;
  height: 100vh;
}

.VIM-modal-image-container {
  max-height: 100vh;
  width: 100%;
  overflow: auto;
  font-size: 0;
  max-width: 1200px;
  margin: auto;
  padding: 2rem;
}

.VIM-modal-image-container > * {
  margin-bottom: 1.5rem;
}

.VIM-modal-close {
  cursor: zoom-out;
  background-color: rgb(var(--VIM-color-modal-background));
  border: 0.1rem solid rgba(var(--VIM-color-modal-foreground), 0.1);
  border-radius: 50%;
  color: rgba(var(--VIM-color-modal-foreground), 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  right: 2rem;
  padding: 1.2rem;
  position: fixed;
  z-index: 2;
  top: 2rem;
  width: 4rem;
  height: 4rem;
}

.VIM-modal-close svg {
  height: auto;
  margin: 0;
  width: 2.2rem;
}

@media (min-width: 750px) {
  .VIM-modal-close {
    right: 5rem;
    top: 2.2rem;
  }
}

@media (min-width: 990px) {
  .VIM-modal-image-container {
    padding: 2rem 5rem;
  }
}

.pswp__bg {
  display: block !important;
}

._pswp__zoom-wrap {
  --width: 2000px;
  --height: 2000px;
  height: var(--height) !important;
  width: var(--width) !important;
  transition: background-color ease-in-out 0.2s 0.2s;
  background-color: transparent;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* ._pswp__container:not(._initialized) ._pswp__zoom-wrap, */
._pswp__img._pswp__img--placeholder {
  background-color: var(--_pswp-placeholder-bg);
}

/* ._pswp__container:not(._initialized) ._pswp__zoom-wrap::before, */
._pswp__img._pswp__img--placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 0;
  background-color: rgba(241, 241, 241, 0.1);
  animation: VIM-progress-bar 3s linear infinite;
  z-index: 0;
}

@keyframes VIM-progress-bar {
  0% {
    width: 0%;
  }
  25% {
    width: 50%;
  }
  50% {
    width: 75%;
  }
  75% {
    width: 90%;
  }
  100% {
    width: 100%;
  }
}

.VIM-pswp-open > *:not(._pswp) {
  filter: blur(65px);
  transition: filter 0.1s ease-in-out;
}

.VIM-slide-image-hq-decoy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
