.modal {
  --modal-frame-viewport-gap: clamp(0.75rem, 3vw, 2.25rem);
  --modal-frame-max-inline-size: min(84rem, calc(100vw - var(--modal-frame-viewport-gap) - var(--modal-frame-viewport-gap)));
  --modal-frame-max-block-size: calc(100svh - var(--modal-frame-viewport-gap) - var(--modal-frame-viewport-gap));
  --modal-frame-surface-bg: transparent;
  --modal-frame-surface-padding-block: clamp(1rem, 3svh, 2rem);
  --modal-frame-surface-padding-inline: clamp(1rem, 3vw, 2rem);
  --modal-frame-surface-radius: 1rem;
  --modal-frame-surface-shadow: 0 1.25rem 4rem rgb(0 0 0 / 0.24);
  --modal-main-view-max-inline-size: 100%;
  --modal-main-view-max-block-size: min(76svh, var(--modal-frame-max-block-size));
  --modal-content-nav-visibility-breakpoint: 768px;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  pointer-events: none;
}
.modal[data-modal-choose-effective-mode=chooser-viewer] {
  --modal-main-view-max-block-size: min(72svh, var(--modal-frame-max-block-size));
}
.modal.is_active {
  display: grid;
  place-items: center;
  pointer-events: auto;
}
.modal :where(.window) {
  inline-size: fit-content;
  max-inline-size: var(--modal-frame-max-inline-size);
  max-block-size: var(--modal-frame-max-block-size);
  justify-self: center;
  align-self: center;
  margin-inline: auto;
}
.modal[data-modal-frame-surface=true] :where(.window) {
  padding-block: var(--modal-frame-surface-padding-block);
  padding-inline: var(--modal-frame-surface-padding-inline);
  border-radius: var(--modal-frame-surface-radius);
  background: var(--modal-frame-surface-bg);
  box-shadow: var(--modal-frame-surface-shadow);
}
.modal :where([data-modal-content-display]) {
  display: grid;
  place-items: center;
  inline-size: fit-content;
  max-inline-size: var(--modal-main-view-max-inline-size);
  max-block-size: var(--modal-main-view-max-block-size);
  margin-inline: auto;
  overflow: hidden;
}
.modal :where([data-modal-content-display] > *) {
  justify-self: center;
  align-self: center;
  max-inline-size: 100%;
  max-block-size: var(--modal-main-view-max-block-size);
  margin-block: auto;
  margin-inline: auto;
}
.modal :where([data-modal-content-display] img,
[data-modal-content-display] video,
[data-modal-content-display] canvas,
[data-modal-content-display] iframe) {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: var(--modal-main-view-max-block-size);
  object-fit: contain;
  object-position: center center;
}

:where(#modalOverlay) {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: none;
  z-index: 100;
  inline-size: 100%;
  block-size: 100vh;
  background-color: rgba(0, 0, 0, 0.72);
}

.no_scroll {
  overflow: hidden;
}

.modal {
  --modal-effect-duration: 0.4s;
  --modal-effect-easing: ease-out;
  --modal-effect-scale-from: 0.92;
  --modal-effect-scale-pop-from: 0;
  --modal-effect-scale-pop-duration: 200ms;
  --modal-effect-blur-from: 12px;
  --modal-content-switch-duration: var(--modal-effect-duration);
  --modal-content-switch-easing: var(--modal-effect-easing);
  --modal-content-switch-blur-from: var(--modal-effect-blur-from);
  --modal-ui-motion-duration: 180ms;
  --modal-ui-motion-easing: var(--modal-content-switch-easing);
  --modal-ui-motion-move-x: 0;
  --modal-ui-motion-move-y: 0;
  --modal-content-switch-block-size: auto;
}
.modal[data-modal-effect-fade=true] {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--modal-effect-duration, 0.4s);
  transition-timing-function: var(--modal-effect-easing, ease-out);
  will-change: opacity;
}
.modal[data-modal-effect-fade=true].is_active.is_effect_ready {
  opacity: 1;
}
.modal[data-modal-effect-fade=true].is_active.is_effect_closing {
  opacity: 0;
  pointer-events: none;
}
.modal[data-modal-effect-fade=true][data-motion-reduced=true] {
  transition-duration: 1ms;
  will-change: auto;
}
.modal[data-modal-effect-fade=true][data-motion-reduced=true].is_active {
  opacity: 1;
}
.modal[data-modal-effect=scale-soft] {
  transform: scale(var(--modal-effect-scale-from, 0.92));
  transform-origin: center center;
  transition-property: transform;
  transition-duration: var(--modal-effect-duration, 0.4s);
  transition-timing-function: var(--modal-effect-easing, ease-out);
  will-change: transform;
}
.modal[data-modal-effect=scale-soft].is_active.is_effect_ready {
  transform: scale(1);
}
.modal[data-modal-effect=scale-soft].is_active.is_effect_closing {
  transform: scale(var(--modal-effect-scale-from, 0.92));
  pointer-events: none;
}
.modal[data-modal-effect=scale-soft][data-motion-reduced=true] {
  transition-duration: 1ms;
  will-change: auto;
}
.modal[data-modal-effect=scale-soft][data-motion-reduced=true].is_active {
  transform: scale(1);
}
.modal[data-modal-effect=scale-pop] {
  transform: scale(var(--modal-effect-scale-pop-from, 0));
  transform-origin: center center;
  transition-property: transform;
  transition-duration: var(--modal-effect-scale-pop-duration, 220ms);
  transition-timing-function: var(--modal-effect-easing, ease-out);
  will-change: transform;
}
.modal[data-modal-effect=scale-pop].is_active.is_effect_ready {
  transform: scale(1);
}
.modal[data-modal-effect=scale-pop].is_active.is_effect_closing {
  transform: scale(var(--modal-effect-scale-pop-from, 0));
  pointer-events: none;
}
.modal[data-modal-effect=scale-pop][data-motion-reduced=true] {
  transition-duration: 1ms;
  will-change: auto;
}
.modal[data-modal-effect=scale-pop][data-motion-reduced=true].is_active {
  transform: scale(1);
}
.modal[data-modal-effect=blur] {
  filter: blur(var(--modal-effect-blur-from, 12px));
  transition-property: filter;
  transition-duration: var(--modal-effect-duration, 0.4s);
  transition-timing-function: var(--modal-effect-easing, ease-out);
  will-change: filter;
}
.modal[data-modal-effect=blur].is_active.is_effect_ready {
  filter: blur(0);
}
.modal[data-modal-effect=blur].is_active.is_effect_closing {
  filter: blur(var(--modal-effect-blur-from, 12px));
  pointer-events: none;
}
.modal[data-modal-effect=blur][data-motion-reduced=true] {
  transition-duration: 1ms;
  will-change: auto;
}
.modal[data-modal-effect=blur][data-motion-reduced=true].is_active {
  filter: blur(0);
}
.modal[data-modal-effect=scale-soft][data-modal-effect-fade=true], .modal[data-modal-effect=scale-pop][data-modal-effect-fade=true], .modal[data-modal-effect=blur][data-modal-effect-fade=true] {
  opacity: 0;
  transition-property: opacity, transform, filter;
  will-change: opacity, transform, filter;
}
.modal[data-modal-effect=scale-soft][data-modal-effect-fade=true].is_active.is_effect_ready, .modal[data-modal-effect=scale-pop][data-modal-effect-fade=true].is_active.is_effect_ready, .modal[data-modal-effect=blur][data-modal-effect-fade=true].is_active.is_effect_ready {
  opacity: 1;
}
.modal[data-modal-effect=scale-soft][data-modal-effect-fade=true].is_active.is_effect_closing, .modal[data-modal-effect=scale-pop][data-modal-effect-fade=true].is_active.is_effect_closing, .modal[data-modal-effect=blur][data-modal-effect-fade=true].is_active.is_effect_closing {
  opacity: 0;
}
.modal[data-modal-effect=scale-soft][data-modal-effect-fade=true][data-motion-reduced=true], .modal[data-modal-effect=scale-pop][data-modal-effect-fade=true][data-motion-reduced=true], .modal[data-modal-effect=blur][data-modal-effect-fade=true][data-motion-reduced=true] {
  will-change: auto;
}
.modal[data-modal-effect=scale-soft][data-modal-effect-fade=true][data-motion-reduced=true].is_active, .modal[data-modal-effect=scale-pop][data-modal-effect-fade=true][data-motion-reduced=true].is_active, .modal[data-modal-effect=blur][data-modal-effect-fade=true][data-motion-reduced=true].is_active {
  opacity: 1;
}

:where(.modal) :where([data-modal-content-display], [data-modal-choose-list]) {
  opacity: 1;
  filter: blur(0);
  transition-property: opacity, filter;
  transition-duration: var(--modal-content-switch-duration, 0.4s);
  transition-timing-function: var(--modal-content-switch-easing, ease-out);
  will-change: opacity, filter;
}
:where(.modal) :where([data-modal-content-display], [data-modal-choose-list]):where(.is_content_switching) {
  opacity: 0;
}
:where(.modal) :where([data-modal-content-display], [data-modal-choose-list]):where(.is_content_switching_blur) {
  filter: blur(var(--modal-content-switch-blur-from, 12px));
}
:where(.modal) :where([data-modal-content-display].is_content_size_animating) {
  block-size: var(--modal-content-switch-block-size);
  overflow: hidden;
  transition-property: opacity, filter, block-size;
}
:where(.modal) :where([data-modal-content-display].is_content_switching video.is-modal-video-preparing) {
  visibility: hidden;
}
:where(.modal) :where([data-modal-content-display] video.is-modal-video-preparing)::-webkit-media-controls,
:where(.modal) :where([data-modal-content-display] video.is-modal-video-preparing)::-webkit-media-controls-enclosure,
:where(.modal) :where([data-modal-content-display] video.is-modal-video-preparing)::-webkit-media-controls-panel {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
:where(.modal):where([data-modal-ui-motion]) :where(.window > .control, [data-modal-indicator], [data-modal-indicator-group]) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-property: opacity, transform;
  transition-duration: var(--modal-ui-motion-duration, 180ms);
  transition-timing-function: var(--modal-ui-motion-easing, ease-out);
  will-change: opacity, transform;
}
:where(.modal):where([data-modal-ui-motion]):where(.is_ui_switching) :where(.window > .control, [data-modal-indicator], [data-modal-indicator-group]) {
  opacity: 0;
  transform: translate3d(var(--modal-ui-motion-move-x, 0), var(--modal-ui-motion-move-y, 0), 0);
}
:where(.modal):where([data-modal-ui-motion]):where(.is_ui_switching) :where(.window > .control button, .window > .control [data-modal-content-nav]) {
  pointer-events: none;
}
:where(.modal):where([data-motion-reduced=true]) :where([data-modal-content-display],
[data-modal-choose-list],
.window > .control,
[data-modal-indicator],
[data-modal-indicator-group]) {
  transition-duration: 1ms;
  will-change: auto;
}

:where(.modal .window .control) {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
:where(.modal .window .control) :where([data-modal-close]) {
  line-height: 1;
  appearance: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  border-block-width: 0;
  border-inline-width: 0;
  background-color: transparent;
}
@media screen and (min-width: 769px) {
  :where(.modal .window .control) :where([data-modal-close]) {
    inset-inline-end: -4vw;
  }
}
@media screen and (max-width: 768px) {
  :where(.modal .window .control) :where([data-modal-close]) {
    inset-inline-end: 4vw;
  }
}
@media screen and (min-width: 769px) {
  :where(.modal .window .control) :where([data-modal-close]) {
    max-inline-size: 3.75vw;
    block-size: 3.75vw;
  }
}
@media screen and (max-width: 768px) {
  :where(.modal .window .control) :where([data-modal-close]) {
    max-inline-size: 12vw;
    block-size: 12vw;
  }
}
:where(.modal .window .control) :where([data-modal-close]) {
  pointer-events: auto;
}
:where(.modal .window .control) :where([data-modal-close]) > :where(.mark) {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: inline-block;
  inline-size: 100%;
  background-color: white;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
  translate: -50% -50%;
}
@media screen and (min-width: 769px) {
  :where(.modal .window .control) :where([data-modal-close]) > :where(.mark) {
    max-inline-size: 1.75vw;
    block-size: 0.10417vw;
  }
}
@media screen and (max-width: 768px) {
  :where(.modal .window .control) :where([data-modal-close]) > :where(.mark) {
    max-inline-size: 8.4vw;
    block-size: 0.5vw;
  }
}
:where(.modal .window .control) :where([data-modal-close]) > :where(.mark):nth-of-type(1) {
  rotate: 45deg;
}
:where(.modal .window .control) :where([data-modal-close]) > :where(.mark):nth-of-type(2) {
  rotate: -45deg;
}
:where(.modal .window .control) :where([data-modal-content-nav=prev],
[data-modal-content-nav=prev-item],
[data-modal-content-nav=next],
[data-modal-content-nav=next-item],
[data-modal-content-nav=prev-group],
[data-modal-content-nav=next-group]) {
  line-height: 1;
  appearance: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  position: absolute;
  inline-size: 100%;
  background-color: transparent;
  border-block-width: 0;
  border-inline-width: 0;
  pointer-events: auto;
}
:where(.modal .window .control) :where([data-modal-content-nav=prev],
[data-modal-content-nav=prev-item],
[data-modal-content-nav=next],
[data-modal-content-nav=next-item],
[data-modal-content-nav=prev-group],
[data-modal-content-nav=next-group]) > :where(.mark) {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: inline-block;
  inline-size: 100%;
  block-size: 100%;
  background-color: transparent;
  border-block-start-color: #fff;
  border-block-start-style: solid;
}
@media screen and (min-width: 769px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev],
  [data-modal-content-nav=prev-item],
  [data-modal-content-nav=next],
  [data-modal-content-nav=next-item],
  [data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) > :where(.mark) {
    border-block-start-width: 0.10417vw;
  }
}
@media screen and (max-width: 768px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev],
  [data-modal-content-nav=prev-item],
  [data-modal-content-nav=next],
  [data-modal-content-nav=next-item],
  [data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) > :where(.mark) {
    border-block-start-width: 0.5vw;
  }
}
:where(.modal .window .control) :where([data-modal-content-nav=prev],
[data-modal-content-nav=prev-item],
[data-modal-content-nav=next],
[data-modal-content-nav=next-item],
[data-modal-content-nav=prev-group],
[data-modal-content-nav=next-group]) > :where(.mark) {
  border-inline-start-color: #fff;
  border-inline-start-style: solid;
}
@media screen and (min-width: 769px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev],
  [data-modal-content-nav=prev-item],
  [data-modal-content-nav=next],
  [data-modal-content-nav=next-item],
  [data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) > :where(.mark) {
    border-inline-start-width: 0.10417vw;
  }
}
@media screen and (max-width: 768px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev],
  [data-modal-content-nav=prev-item],
  [data-modal-content-nav=next],
  [data-modal-content-nav=next-item],
  [data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) > :where(.mark) {
    border-inline-start-width: 0.5vw;
  }
}
:where(.modal .window .control) :where([data-modal-content-nav=prev],
[data-modal-content-nav=prev-item],
[data-modal-content-nav=next],
[data-modal-content-nav=next-item],
[data-modal-content-nav=prev-group],
[data-modal-content-nav=next-group]) > :where(.mark):nth-of-type(1)::before, :where(.modal .window .control) :where([data-modal-content-nav=prev],
[data-modal-content-nav=prev-item],
[data-modal-content-nav=next],
[data-modal-content-nav=next-item],
[data-modal-content-nav=prev-group],
[data-modal-content-nav=next-group]) > :where(.mark):nth-of-type(2)::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: 100%;
  filter: opacity(0.5) blur(2px);
  border-block-start-color: rgba(0, 0, 0, 0.5);
  border-block-start-style: solid;
}
@media screen and (min-width: 769px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev],
  [data-modal-content-nav=prev-item],
  [data-modal-content-nav=next],
  [data-modal-content-nav=next-item],
  [data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) > :where(.mark):nth-of-type(1)::before, :where(.modal .window .control) :where([data-modal-content-nav=prev],
  [data-modal-content-nav=prev-item],
  [data-modal-content-nav=next],
  [data-modal-content-nav=next-item],
  [data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) > :where(.mark):nth-of-type(2)::before {
    border-block-start-width: 0.10417vw;
  }
}
@media screen and (max-width: 768px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev],
  [data-modal-content-nav=prev-item],
  [data-modal-content-nav=next],
  [data-modal-content-nav=next-item],
  [data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) > :where(.mark):nth-of-type(1)::before, :where(.modal .window .control) :where([data-modal-content-nav=prev],
  [data-modal-content-nav=prev-item],
  [data-modal-content-nav=next],
  [data-modal-content-nav=next-item],
  [data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) > :where(.mark):nth-of-type(2)::before {
    border-block-start-width: 0.5vw;
  }
}
:where(.modal .window .control) :where([data-modal-content-nav=prev],
[data-modal-content-nav=prev-item],
[data-modal-content-nav=next],
[data-modal-content-nav=next-item],
[data-modal-content-nav=prev-group],
[data-modal-content-nav=next-group]) > :where(.mark):nth-of-type(1)::before, :where(.modal .window .control) :where([data-modal-content-nav=prev],
[data-modal-content-nav=prev-item],
[data-modal-content-nav=next],
[data-modal-content-nav=next-item],
[data-modal-content-nav=prev-group],
[data-modal-content-nav=next-group]) > :where(.mark):nth-of-type(2)::before {
  border-inline-start-color: rgba(0, 0, 0, 0.5);
  border-inline-start-style: solid;
}
@media screen and (min-width: 769px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev],
  [data-modal-content-nav=prev-item],
  [data-modal-content-nav=next],
  [data-modal-content-nav=next-item],
  [data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) > :where(.mark):nth-of-type(1)::before, :where(.modal .window .control) :where([data-modal-content-nav=prev],
  [data-modal-content-nav=prev-item],
  [data-modal-content-nav=next],
  [data-modal-content-nav=next-item],
  [data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) > :where(.mark):nth-of-type(2)::before {
    border-inline-start-width: 0.10417vw;
  }
}
@media screen and (max-width: 768px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev],
  [data-modal-content-nav=prev-item],
  [data-modal-content-nav=next],
  [data-modal-content-nav=next-item],
  [data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) > :where(.mark):nth-of-type(1)::before, :where(.modal .window .control) :where([data-modal-content-nav=prev],
  [data-modal-content-nav=prev-item],
  [data-modal-content-nav=next],
  [data-modal-content-nav=next-item],
  [data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) > :where(.mark):nth-of-type(2)::before {
    border-inline-start-width: 0.5vw;
  }
}
:where(.modal .window .control) :where([data-modal-content-nav=prev],
[data-modal-content-nav=prev-item],
[data-modal-content-nav=next],
[data-modal-content-nav=next-item]) {
  inset-block-start: 50%;
  translate: 0 -50%;
}
@media screen and (min-width: 769px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev],
  [data-modal-content-nav=prev-item],
  [data-modal-content-nav=next],
  [data-modal-content-nav=next-item]) {
    max-inline-size: 2.5vw;
    block-size: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev],
  [data-modal-content-nav=prev-item],
  [data-modal-content-nav=next],
  [data-modal-content-nav=next-item]) {
    max-inline-size: 6vw;
    block-size: 6vw;
  }
}
:where(.modal .window .control) :where([data-modal-content-nav=prev],
[data-modal-content-nav=prev-item]) {
  rotate: -45deg;
}
@media screen and (min-width: 769px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev],
  [data-modal-content-nav=prev-item]) {
    inset-inline-start: -4vw;
  }
}
@media screen and (max-width: 768px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev],
  [data-modal-content-nav=prev-item]) {
    inset-inline-start: 4vw;
  }
}
:where(.modal .window .control) :where([data-modal-content-nav=prev],
[data-modal-content-nav=prev-item]) :where(.mark):nth-of-type(1)::before {
  inset-inline-start: 2px;
}
:where(.modal .window .control) :where([data-modal-content-nav=next],
[data-modal-content-nav=next-item]) {
  rotate: 135deg;
}
@media screen and (min-width: 769px) {
  :where(.modal .window .control) :where([data-modal-content-nav=next],
  [data-modal-content-nav=next-item]) {
    inset-inline-end: -4vw;
  }
}
@media screen and (max-width: 768px) {
  :where(.modal .window .control) :where([data-modal-content-nav=next],
  [data-modal-content-nav=next-item]) {
    inset-inline-end: 4vw;
  }
}
:where(.modal .window .control) :where([data-modal-content-nav=next],
[data-modal-content-nav=next-item]) :where(.mark)::before {
  inset-inline-end: -2px;
}
:where(.modal .window .control) :where([data-modal-content-nav=prev-group],
[data-modal-content-nav=next-group]) {
  inset-inline-start: 50%;
  translate: -50% -50%;
}
@media screen and (min-width: 769px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) {
    max-inline-size: 3.75vw;
    block-size: 3.75vw;
  }
}
@media screen and (max-width: 768px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) {
    max-inline-size: 12vw;
    block-size: 12vw;
  }
}
@media screen and (min-width: 769px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) :where(.mark):nth-of-type(2) {
    inset-block-start: 0.625vw;
  }
}
@media screen and (max-width: 768px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) :where(.mark):nth-of-type(2) {
    inset-block-start: 2vw;
  }
}
:where(.modal .window .control) :where([data-modal-content-nav=prev-group],
[data-modal-content-nav=next-group]) :where(.string) {
  display: inline-block;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}
@media screen and (min-width: 769px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) :where(.string) {
    font-size: 0.625vw;
  }
}
@media screen and (max-width: 768px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev-group],
  [data-modal-content-nav=next-group]) :where(.string) {
    font-size: 2vw;
  }
}
@media screen and (min-width: 769px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev-group]) {
    inset-block-start: 2dvh;
  }
}
@media screen and (max-width: 768px) {
  :where(.modal .window .control) :where([data-modal-content-nav=prev-group]) {
    inset-block-start: 2dvh;
  }
}
:where(.modal .window .control) :where([data-modal-content-nav=prev-group]) :where(.mark) {
  rotate: 45deg;
  transform: skew(-10deg, -10deg);
}
:where(.modal .window .control) :where([data-modal-content-nav=prev-group]) :where(.mark)::before {
  inset-inline-end: -2px;
}
@media screen and (min-width: 769px) {
  :where(.modal .window .control) :where([data-modal-content-nav=next-group]) {
    inset-block-end: -6dvh;
  }
}
@media screen and (max-width: 768px) {
  :where(.modal .window .control) :where([data-modal-content-nav=next-group]) {
    inset-block-end: -3dvh;
  }
}
:where(.modal .window .control) :where([data-modal-content-nav=next-group]) :where(.mark) {
  rotate: -135deg;
  transform: skew(-10deg, -10deg);
}
:where(.modal .window .control) :where([data-modal-content-nav=next-group]) :where(.mark)::before {
  inset-inline-end: -2px;
}

:where(.modal.is_content_close_visibility_managed .window .control) :where([data-modal-close]) {
  filter: opacity(0);
  visibility: hidden;
  pointer-events: auto;
  transition-property: filter, visibility;
  transition-duration: 0.8s;
  transition-timing-function: ease-in-out;
}

:where(.modal.is_content_close_visibility_managed.is_content_close_visible .window .control) :where([data-modal-close]) {
  filter: opacity(1);
  visibility: visible;
  pointer-events: auto;
  transition-property: filter, visibility;
  transition-duration: 0.8s;
  transition-timing-function: ease-in-out;
}

:where(.modal .window .control) :where([data-modal-content-nav]) {
  filter: opacity(0);
  visibility: hidden;
  pointer-events: auto;
  transition-property: filter, visibility;
  transition-duration: 0.8s;
  transition-timing-function: ease-in-out;
}

:where(.modal.is_content_nav_visible .window .control) :where([data-modal-content-nav]) {
  filter: opacity(1);
  visibility: visible;
  pointer-events: auto;
  transition-property: filter, visibility;
  transition-duration: 0.8s;
  transition-timing-function: ease-in-out;
}

.modal {
  --modal-indicator-offset: 0.83333vw;
  --modal-indicator-padding-block: 0.36458vw;
  --modal-indicator-padding-inline: 0.83333vw;
  --modal-indicator-gap: 0.3125vw;
  --modal-indicator-font-size: 0.72917vw;
  --modal-indicator-shadow: 0 0.20833vw 0.83333vw rgb(0 0 0 / 0.24);
  --modal-indicator-radius: 999px;
  --modal-indicator-bg: rgb(0 0 0 / 0.5);
  --modal-indicator-color: #fff;
  --modal-indicator-z-index: 2;
}

@media screen and (max-width: 768px) {
  .modal {
    --modal-indicator-offset: 3vw;
    --modal-indicator-padding-block: 1.25vw;
    --modal-indicator-padding-inline: 3vw;
    --modal-indicator-gap: 1vw;
    --modal-indicator-font-size: 3vw;
    --modal-indicator-shadow: 0 0.75vw 3vw rgb(0 0 0 / 0.24);
  }
}
:where(.modal) :where([data-modal-content-display]) {
  position: relative;
}
:where(.modal) :where(.window) {
  position: relative;
}
:where(.modal) :where([data-modal-indicator],
[data-modal-indicator-group]) {
  position: absolute;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  z-index: var(--modal-indicator-z-index);
  gap: var(--modal-indicator-gap);
  padding-block: var(--modal-indicator-padding-block);
  padding-inline: var(--modal-indicator-padding-inline);
  border-radius: var(--modal-indicator-radius);
  background: var(--modal-indicator-bg);
  font-size: var(--modal-indicator-font-size);
  color: var(--modal-indicator-color);
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--modal-indicator-shadow);
  pointer-events: none;
  user-select: none;
}
:where(.modal) :where([data-modal-indicator],
[data-modal-indicator-group]):where([hidden]) {
  display: none !important;
}
:where(.modal) :where([data-modal-indicator],
[data-modal-indicator-group]):where([data-modal-indicator-placement=top-end],
[data-modal-indicator-placement=outside]) {
  inset-block-start: var(--modal-indicator-offset);
  inset-inline-end: var(--modal-indicator-offset);
}
:where(.modal) :where([data-modal-indicator],
[data-modal-indicator-group]):where([data-modal-indicator-placement=top-center]) {
  inset-block-start: var(--modal-indicator-offset);
  inset-inline-start: 50%;
  translate: -50% 0;
}
:where(.modal) :where([data-modal-indicator],
[data-modal-indicator-group]):where([data-modal-indicator-placement=top-start]) {
  inset-block-start: var(--modal-indicator-offset);
  inset-inline-start: var(--modal-indicator-offset);
}
:where(.modal) :where([data-modal-indicator],
[data-modal-indicator-group]):where([data-modal-indicator-placement=bottom-end]) {
  inset-block-end: var(--modal-indicator-offset);
  inset-inline-end: var(--modal-indicator-offset);
}
:where(.modal) :where([data-modal-indicator],
[data-modal-indicator-group]):where([data-modal-indicator-placement=bottom-center]) {
  inset-block-end: var(--modal-indicator-offset);
  inset-inline-start: 50%;
  translate: -50% 0;
}
:where(.modal) :where([data-modal-indicator],
[data-modal-indicator-group]):where([data-modal-indicator-placement=bottom-start]) {
  inset-block-end: var(--modal-indicator-offset);
  inset-inline-start: var(--modal-indicator-offset);
}

.modal {
  --modal-choose-list-items-per-view: 6;
  --modal-choose-list-gap: 0.41667vw;
  --modal-choose-list-margin-block-start: 0.625vw;
  --modal-choose-list-padding-block-end: 0.20833vw;
  --modal-choose-item-radius: 0.3125vw;
  --modal-choose-scroll-hint-inline-size: 4.16667vw;
  --modal-choose-item-inline-size: calc((100% - var(--modal-choose-list-gap) - var(--modal-choose-list-gap) - var(--modal-choose-list-gap) - var(--modal-choose-list-gap) - var(--modal-choose-list-gap)) / 6);
  --modal-choose-item-aspect-ratio: 4 / 3;
  --modal-choose-item-border-color: rgb(255 255 255 / 0.35);
  --modal-choose-item-current-border-color: #fff;
  --modal-choose-item-bg: rgb(0 0 0 / 0.24);
  --modal-choose-item-opacity: 0.7;
  --modal-choose-item-current-opacity: 1;
  --modal-choose-scroll-hint-color: rgb(255 255 255 / 0.72);
  --modal-choose-scroll-hint-transition-duration: 180ms;
}
.modal[data-modal-choose-effective-mode=single-viewer] :where(.choose) {
  display: none !important;
}
.modal :where(.choose) {
  position: relative;
  inline-size: 100%;
  min-inline-size: 0;
}
.modal :where(.choose[data-modal-choose-scroll-state=overflow] [data-modal-choose-list]) {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--modal-choose-scroll-hint-inline-size)), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--modal-choose-scroll-hint-inline-size)), transparent 100%);
}
.modal :where(.choose[data-modal-choose-scroll-state=overflow][data-modal-choose-scroll-position=middle] [data-modal-choose-list]) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--modal-choose-scroll-hint-inline-size), #000 calc(100% - var(--modal-choose-scroll-hint-inline-size)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--modal-choose-scroll-hint-inline-size), #000 calc(100% - var(--modal-choose-scroll-hint-inline-size)), transparent 100%);
}
.modal :where(.choose[data-modal-choose-scroll-state=overflow][data-modal-choose-scroll-position=end] [data-modal-choose-list]) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--modal-choose-scroll-hint-inline-size), #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--modal-choose-scroll-hint-inline-size), #000 100%);
}
.modal :where([data-modal-choose-list]) {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--modal-choose-list-gap);
  inline-size: 100%;
  max-inline-size: 100%;
  margin-block: var(--modal-choose-list-margin-block-start) 0;
  margin-inline: auto;
  padding: 0 0 var(--modal-choose-list-padding-block-end);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  list-style: none;
  scrollbar-width: thin;
}
.modal :where([data-modal-choose-list][data-modal-choose-scroll-state=fit]) {
  justify-content: center;
  overflow-x: hidden;
}
.modal :where([data-modal-choose-list][hidden]) {
  display: none !important;
}
.modal :where([data-modal-choose-list] > .item) {
  flex: 0 0 var(--modal-choose-item-inline-size);
  min-inline-size: 0;
}
.modal :where(.btn-modal-choose, [data-modal-choose-item]) {
  line-height: 1;
  appearance: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  display: block;
  inline-size: 100%;
  aspect-ratio: var(--modal-choose-item-aspect-ratio);
  overflow: hidden;
  border: 1px solid var(--modal-choose-item-border-color);
  border-radius: var(--modal-choose-item-radius);
  background: var(--modal-choose-item-bg);
  opacity: var(--modal-choose-item-opacity);
}
.modal :where(.btn-modal-choose > *) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
}
.modal :where(.btn-modal-choose.is_current, .item.is_current > .btn-modal-choose) {
  border-color: var(--modal-choose-item-current-border-color);
  opacity: var(--modal-choose-item-current-opacity);
}
.modal :where(.btn-modal-choose picture, .btn-modal-choose figure) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  overflow: hidden;
}
.modal :where(.btn-modal-choose img, .btn-modal-choose video) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 100%;
  min-block-size: 100%;
  object-fit: cover;
  object-position: center center;
}

@media screen and (max-width: 768px) {
  .modal {
    --modal-choose-list-gap: 1.5vw;
    --modal-choose-list-margin-block-start: 2vw;
    --modal-choose-list-padding-block-end: 0.75vw;
    --modal-choose-item-radius: 1vw;
    --modal-choose-scroll-hint-inline-size: 10vw;
  }
}
.modal .window .control [data-modal-close] {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
}
@media screen and (min-width: 769px) {
  .modal .window .control [data-modal-close] {
    inset-block-start: 1vh;
    inset-inline-end: 1vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control [data-modal-close] {
    inset-block-start: 1vh;
    inset-inline-end: 4vw;
  }
}
@media screen and (min-width: 769px) {
  .modal .window .control [data-modal-close] {
    max-inline-size: 2.5vw;
    block-size: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control [data-modal-close] {
    max-inline-size: 12vw;
    block-size: 12vw;
  }
}
@media screen and (min-width: 769px) {
  .modal .window .control [data-modal-close] > .mark {
    max-inline-size: 1.5vw;
    block-size: 0.10417vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control [data-modal-close] > .mark {
    max-inline-size: 7.2vw;
    block-size: 0.5vw;
  }
}

[data-modal-window] [data-modal-open] {
  line-height: 1;
  appearance: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
}

@scope (.area-prmy-media-gallery) to (.area-scdy-media-gallery) {
  :scope .head .overview .title .g-heading-page-primary {
    text-align: right;
  }
  :scope .head .overview .title .g-heading-page-primary .string.main {
    text-transform: uppercase;
  }
  :scope .body .list-gallery .list-thumb {
    display: flex;
    flex-wrap: wrap;
  }
  :scope .body .list-gallery .list-thumb > .item {
    position: relative;
    inline-size: 100%;
  }
  @media screen and (min-width: 769px) {
    :scope .body .list-gallery .list-thumb > .item {
      max-inline-size: 20%;
    }
  }
  @media screen and (max-width: 768px) {
    :scope .body .list-gallery .list-thumb > .item {
      max-inline-size: 25%;
    }
  }
  :scope .body .list-gallery .list-thumb > .item > .disp .media {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 1 / 1;
  }
  :scope .body .list-gallery .list-thumb > .item > .disp .media .image {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  :scope .body .list-gallery .list-thumb > .item > .disp .media {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 1 / 1;
  }
  :scope .body .list-gallery .list-thumb > .item > .disp .media .video {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  :scope .body .list-gallery .list-thumb > .item .list-media {
    display: none;
  }
  @media screen and (max-width: 768px) {
    :scope .inner-media-gallery {
      padding-inline-start: 9vw;
      padding-inline-end: 9vw;
    }
  }
}
/*# sourceMappingURL=gallery.css.map */