.modal { inset: 0; position: fixed; z-index: 50; }
.modal__container {width: 100%; height: 100%; padding: 10vh 0; overflow-y: auto;}
.modal__overlay { background: rgba(0, 38, 77, 0.6); inset: 0; position: absolute; z-index: -1; }
.modal__dialog { width: min(calc(100vw - 2rem), 640px); max-width: 640px; height: max-content; padding: 48px 64px; background: var(--color-surface); border-radius: var(--radius-base); position: relative; }
.modal-dialog--large { width: min(calc(100vw - 2rem), 800px); max-width: 800px; }
.modal__header { text-align: center; }
.modal__close { width: 36px; height: 36px; position: absolute; top: 10px; right: 10px; }
.modal__body { display: grid; gap: var(--space-lg); }
.modal__header-title { font-size: clamp(1.38rem, calc(1.199rem + 0.882vw), 1.75rem); font-weight: 500; }
.modal__header-text { color: var(--color-neutral-500); font-size: 1rem; font-weight: 400; margin-top: 1rem; }
.modal__content { text-align: center; }
.modal__content img { margin: 0 auto !important; }
.modal__content iframe { width: 100%; height: auto; min-height: 400px; }
.register-modal .modal__header-text { max-width: 321px; margin: 1rem auto 0 auto; }
@media (max-width: 500px) {
  .modal__dialog { padding: 65px 20px 40px 20px; }
}