body:has(.dialog[open]) {
  block-size: 100vh;
  overflow: hidden;
}
.dialog {
  padding: 0;
  margin: 0;
  border: 0 none;
  background-color: var(--color-grey-1);
  color: var(--color-text);
  position: fixed;
  inset: 0;
  z-index: 1;
  display: none;
  grid-template-columns: MINMAX(var(--container-min-space, 1rem), 1fr) repeat(var(--container-columns, 12), MINMAX(0, var(--container-column-width))) MINMAX(var(--container-min-space, 1rem), 1fr);
  column-gap: var(--container-gutter, 1rem);
  --container-column-width: calc((var(--container-width, 83.75rem) - var(--container-gutter, 1rem) * (var(--container-columns, 12) - 1)) / var(--container-columns, 12));
}
.dialog[open] {
  display: grid;
}
.dialog.--bookzo {
  inline-size: 100svw;
  block-size: 100svh;
  min-inline-size: 100%;
  min-block-size: 100%;
}
.dialog__actions {
  grid-column: 1/-1;
  background-color: var(--color-white);
  color: var(--color-text);
  padding: var(--padding-small);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 64rem) {
  .dialog__actions {
    padding: var(--padding-medium);
  }
}
.dialog__actions .button__title {
  font-size: var(--font-size--md);
  font-weight: var(--font-weight--bold);
}
.dialog__actions .button.--control {
  --icon-scale: 1rem;
  background-color: transparent;
  color: var(--color-text);
  padding: 0;
  border: 0 none;
  border-radius: 0;
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-end: 1.875rem;
  z-index: 1;
  inline-size: auto;
}
@media (min-width: 64rem) {
  .dialog__actions .button.--control {
    inset-block-start: 1.875rem;
  }
}
.dialog__actions .button.--control .button__title {
  display: none;
}
.dialog__actions .button.--control:hover, .dialog__actions .button.--control:focus-visible {
  background-color: transparent;
  color: var(--color-text);
}
.dialog__content {
  grid-column: 2/-2;
  display: grid;
  grid-template-columns: subgrid;
  padding-block: var(--padding-medium);
}
@media (min-width: 64rem) {
  .dialog__content {
    padding-block: 3rem;
  }
}
.dialog__images {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-medium);
}
@media (min-width: 64rem) {
  .dialog__images {
    grid-column: 3 / -3;
  }
}
.dialog__image {
  border-radius: var(--border-radius-small);
  max-inline-size: 100%;
  max-block-size: 100%;
  margin: auto;
  object-fit: cover;
}
.dialog .--dialog-trigger {
  border: 0 none;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  cursor: pointer;
}
.dialog .--dialog-trigger.--bookzo-gallery-large {
  grid-column: span 2;
}
.dialog .--dialog-trigger img {
  object-fit: cover;
}
.dialog.--bookzo-slider {
  max-inline-size: var(--container-width);
  margin: auto;
  inset: 0;
  border-radius: var(--border-radius-small);
}
@media (min-width: 30rem) {
  .dialog.--bookzo-slider {
    inset: 5%;
  }
}
.dialog.--bookzo-slider::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #000;
  opacity: 0.5;
}
.dialog.--bookzo-slider .dialog__content {
  background-color: var(--color-grey-1);
  grid-column: 1/-1;
}
.dialog .slider {
  max-inline-size: 100%;
  grid-column: 2/-2;
  position: relative;
  overflow: clip;
  --slider-active: show;
  --loop: show;
  --effect: coverflow;
  --slides: 1;
  --space-between: 0.25;
  --pagination: none;
  --numbers: none;
  --slider__padding-block: 0;
  --slider__next-opacity--disabled: 0.8;
  --media-slider__button-visibility--disabled: visible;
}
.dialog .slider__slides {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dialog .slider__slide {
  display: flex;
}
.dialog .slider__image {
  max-inline-size: 100%;
  max-block-size: 75svh;
  object-fit: cover;
  object-position: left bottom;
  aspect-ratio: revert-layer;
}
@media (min-width: 48rem) {
  .dialog .slider__image {
    aspect-ratio: auto;
    block-size: revert-layer;
  }
}
.dialog .slider__controls {
  gap: 0.375rem;
  position: absolute;
  inset-inline-end: 1.5rem;
  inset-block-end: 1.5rem;
  z-index: 1;
  inline-size: auto;
}
.dialog .slider__prev, .dialog .slider__next {
  inline-size: 3.1875rem;
  block-size: 3.1875rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  background-color: var(--color-white);
  color: var(--color-text);
}
.dialog .slider__prev:hover, .dialog .slider__prev:focus-visible, .dialog .slider__next:hover, .dialog .slider__next:focus-visible {
  background-color: var(--color-white);
  color: var(--color-text);
}
.dialog .slider .swiper-button-disabled {
  cursor: no-drop;
}