.modalOverlay { position: fixed; z-index: 100; top: 0; left: 0; bottom: 0; right: 0; background: rgba(23, 25, 28, 0.5); display: flex; align-items: center; justify-content: center; } .modal { background: #21262c; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); border-radius: 8px; max-width: 90vw; width: 600px; display: flex; flex-direction: column; } .modalHeader { display: flex; justify-content: space-between; padding: 34px 34px 0 34px; } .modalHeader h3 { font-size: 24px; margin: 0; } .closeButton { position: relative; display: flex; justify-content: center; align-items: center; background-color: transparent; padding: 0; border: none; cursor: pointer; } .content { padding: 24px 32px; } .content p { margin-top: 0; } @media (max-width: 799px) { .modal.mobileFullScreen { position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; } }