.call-popup:hover {
  cursor: pointer;
}
.overlay .wrapper .popup {
  min-width: 400px;
  width: fit-content;
  min-height: 200px;
  aspect-ratio: 16 / 9;
  height: fit-content;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-default);
  border-radius: var(--rounded-16);
  box-shadow: var(--elevation-7);
  position: relative;
}
.overlay .wrapper .popup {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.9);
}
.overlay .wrapper .popup.open {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
.overlay .wrapper .popup .popup-body {
  display: block;
  flex-grow: 1;
  overflow-y: auto;
  padding: var(--unit-5) var(--unit-6);
}
.overlay .wrapper .popup > #close {
  width: var(--unit-6);
  height: var(--unit-6);
  line-height: var(--line-height-body);
  cursor: pointer;
  position: absolute;
  top: var(--unit-5);
  right: var(--unit-6);
}
.overlay .wrapper .popup > #close:after {
  content: "close";
  display: inline-flex;
  justify-content: center;
  position: relative;
  height: var(--unit-8);
  width: var(--unit-8);
  color: var(--text-default);
  font-family: var(--font-family-icons);
  font-size: var(--font-size-display-sm);
  font-weight: var(--font-weight-regular);
  overflow: hidden;
  align-items: center;
  margin: calc(var(--unit-2) * -1);
  border-radius: var(--rounded-12);
  text-shadow: -1px -1px 0 var(--white), 0 -1px 0 var(--white),
    1px -1px 0 var(--white), -1px 0 0 var(--white), 1px 0 0 var(--white),
    -1px 1px 0 var(--white), 0 1px 0 var(--white), 1px 1px 0 var(--white);
}
.overlay .wrapper .popup .popup-body:has(iframe) ~ #close:after {
  color: var(--icon-default);
  background: var(--white);
}
.overlay .wrapper .popup #close:hover:after,
.overlay .wrapper .popup .popup-body:has(iframe) ~ #close:hover:after {
  color: var(--white);
  background: var(--red-60);
  text-shadow: none;
}
.overlay .wrapper .popup.medium {
  width: 50%;
}
.overlay .wrapper .popup.large {
  width: 80%;
}
.overlay .wrapper.fill,
.overlay .wrapper.fill,
.overlay .wrapper.fill .popup {
  width: 100%;
  height: 100%;
}
.overlay .wrapper.screen,
.overlay .wrapper.screen,
.overlay .wrapper.screen .popup {
  width: 100%;
  height: 100%;
  min-width: unset;
  max-width: unset;
}
.overlay .wrapper .popup .popup-body:has(iframe),
.overlay .wrapper .popup .popup-body:has(div.px-12) {
  padding: var(--unit-0);
}
.overlay .wrapper .popup iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.overlay .wrapper .popup:has(.popup-img) .popup-body {
  padding: 0;
}
.overlay .wrapper .popup .popup-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.overlay .wrapper.large .popup .popup-img {
  aspect-ratio: 16 / 9;
}

.overlay .wrapper .popup:has(.popup-pdf) .popup-body {
  overflow: hidden;
}
.overlay .wrapper .popup .popup-pdf {
  margin: calc(var(--unit-1) * -1);
  width: calc(100% + (var(--unit-1) * 2));
  height: calc(100% + (var(--unit-1) * 2));
}