.section-body:has(*.is-open) {
  position: relative;
  z-index: 12;
}

.modal-body {
  --modalSpace: var(--wp--preset--spacing--l);
  --modalWidth: 1000px;
  --inset:0;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  inset: var(--inset);
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 100;
  transition: all 350ms ease-in-out;
}

.modal-content {
  background-color: white;
  width: min(var(--modalWidth), calc(100% - (var(--modalSpace) * 2)));
  padding-inline: calc(var(--modalSpace) * 1.5);
  padding-block:  calc(var(--modalSpace) * 3);
  border-radius: 12px;
  overflow: clip;
  transform: translateY(200px);
  z-index: 5;
  transition: all 450ms ease-in-out 200ms;
}

.modal-content[class*="is-style-dots-"]::after,
.modal-content[class*="is-style-dots-"]::before {
  z-index: -1;
}
 
.modal-body.is-open                 { visibility: visible; opacity: 1; overflow-y: auto; }
.modal-body.is-open .modal-content  { 
  transform: translateY(var(--modalSpace));
}   

.no-padding { 
  --modalSpace:var(--wp--preset--spacing--xs);
  --modalWidth:800px;
}
 
.no-padding iframe {
  max-height: 690px !important;
} 
 
.close-modal {
  --closeColor:black;
  color:var(--closeColor);
  position: absolute;
  right: 0;
  top:0;
  cursor: pointer;
  padding: var(--wp--preset--spacing--xs);
  z-index: 4;
}

.close-modal > svg { 
  display: block;
  pointer-events: none;
}

.modal-overlay {
  position: fixed;
  inset:0;
  background:rgba(25 25 25 / 0);
  pointer-events: none;
  z-index: -1;
  transition: all 350ms ease-in-out;
}

.modal-body.is-open .modal-overlay { background:rgba(25 25 25 / .85); pointer-events: all;}

@media only screen and (max-width:768px) {
.modal-body {
  --modalWidth: 500px;
}

@media only screen and (max-width:620px) {
.modal-body {
  --modalSpace: var(--wp--preset--spacing--s);
  --inset:0;
}

.modal-body.is-open .modal-content  { 
  transform: translateY(0px);
  margin-block: var(--modalSpace);
}   

.no-padding { 
  --modalSpace:var(--wp--preset--spacing--xxs);
  --modalWidth:800px;
}

}