.modal-parent-paragraph dialog.simple-modal-std {
  border: none;
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  max-width: 1408px;
  width: 95%;
  text-align: center;
  max-width: 110vh;
  max-width: calc(160vh - 150px);
  margin:auto;
}
@media (min-width: 768px) {
  .modal-parent-paragraph dialog.simple-modal-std {
    width: 90%;
  }
}
.modal-parent-paragraph dialog.simple-modal-std::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.modal-parent-paragraph .close-modal-std {
  color: #aaa;
  font-size: 28px;
  font-weight: 700;
  padding-bottom: 12px;
  cursor: pointer;
  margin-left: auto;
  width: 22px;
}
.modal-parent-paragraph .close-modal-std:hover {
  color: #000;
}
.modal-parent-paragraph .modal-content-std {
  padding: 20px;
  padding-bottom: 56px;
}
.modal-parent-paragraph dialog.simple-modal-std[open] {
  animation: fadeIn 0.3s ease;
}
/* if it has an svg play button then the whole image should have a cursor */
.modal-parent-paragraph .video-cover-image:has(svg) img {
  cursor: pointer;
}
.modal-parent-paragraph .video-cover-image {
  position: relative;
}
.modal-parent-paragraph .video-cover-image svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));
}
.modal-parent-paragraph p:last-of-type {
  margin-bottom: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

html:has(dialog.simple-modal-std[open]) {
  overflow: hidden;
  height: 100%;
}