:root {
  --modal-width: min(90rem, 98vw);
  --modal-height: min(45rem, 90vh);
  --modal-text-padding: clamp(2rem, 4vw, 3rem);
  --modal-media-height-portrait: 40vh;
  --modal-close-offset-portrait: calc(var(--modal-text-padding) * 0.1);
}

.modal__dialog {
  width: var(--modal-width);
  max-width: var(--modal-width);
  height: var(--modal-height);
  max-height: var(--modal-height);
  box-shadow: var(--shadow-cta);
  overflow: hidden;
}

.modal__content {
  height: 100%;
}

.modal__section,
.modal__section .zsection-grid {
  height: 100%;
  align-items: stretch;
}

.modal__section .zsection-text-area {
  padding: var(--modal-text-padding);
  height: 100%;
  overflow: auto;
}

.modal__media {
  padding: 0;
  height: 100%;
  align-self: stretch;
  justify-self: stretch;
}

.reference-slider {
  height: 100%;
  background: transparent;
}

.reference-slider .slider__slide img {
  height: 100%;
  object-fit: cover;
}

.modal__section .zsection-text-area [data-modal-description] {
  white-space: pre-line;
}

@media (max-width: 1080px) and (orientation: portrait) {
  .modal__section {
    padding: 0;
  }

  .is-mobile .modal__section {
    margin: 0;
  }

  .modal__section .zsection-text-area {
    padding: var(--modal-text-padding);
    align-content: start;
    justify-content: start;
    align-self: start;
    justify-self: stretch;
  }

  .modal__section .zsection-grid {
    gap: 0;
  }

  .modal__section .zsection-grid {
    grid-template-columns: 1fr;
    grid-template-rows: var(--modal-media-height-portrait) minmax(0, 1fr);
    align-content: start;
  }

  .modal__media {
    order: 1;
    width: 100%;
    height: var(--modal-media-height-portrait);
    margin: 0;
    border-radius: 0;
    padding: 0;
  }

  .modal__section .zsection-text-area {
    order: 2;
    height: 100%;
    overflow: auto;
    align-self: start;
  }

  .modal__close--media {
    display: grid;
    position: absolute;
    top: calc(var(--modal-media-height-portrait) + var(--modal-close-offset-portrait));
    right: var(--modal-close-offset-portrait);
    z-index: 3;
    background: transparent;
  }


  .reference-slider {
    min-height: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

@media (max-width: 1080px) and (orientation: landscape) {
  .is-mobile .modal__section {
    margin: 0;
    padding: 0;
  }

  .is-mobile .modal__section .zsection-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0;
    height: 100%;
  }

  .is-mobile .modal__section .zsection-text-area {
    display: none;
  }

  .is-mobile .modal__media {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }

  .is-mobile .reference-slider {
    width: 100%;
    height: 100%;
  }

  .is-mobile .modal__close--media {
    display: grid;
  }

  .is-mobile .modal__close--text {
    display: none;
  }
}

.reference-slider,
.reference-slider .slider__content,
.reference-slider .slider__slides,
.reference-slider .slider__slide {
  height: 100%;
}

.is-mobile .reference-slider .slider-controls {
  display: inline-flex;
  z-index: 3;
}

.modal__section .zsection-media {
  padding: 0;
  margin: 0;
}