.modal { height: inherit; } .modal-header__content { width: 100%; } .modal-dialog { max-width: 100% !important; display: flex; height: 100vh; align-items: center; justify-content: center; margin-top: 0; } .modal-body{ padding: 1.5rem 2rem; } .modal__content{ gap: 1rem; div{ width: 50%; } } .modal-content { width: 60rem; height: 40rem; } .has-bg-dark { color: var(--base-color-white); } .modal__galery { display: grid; gap: 1rem; grid-auto-rows: 14rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); } .modal__featured { width: 100%; img { width: 100%; max-height: 14rem; border-radius: var(--base-rounded-medium); } } .modal__gap{ gap: 1rem; p{ margin: 0; } } .modal-content__schedule-header{ gap: .5rem; p{ margin: 0; } } .modal-content__schedule{ gap: .5rem; .modal-content__schedule-day{ display: block; background: var(--base-color-secondary); width: 1.8rem; height: 1.8rem; color: var(--base-color-dark); text-align: center; border-radius: var(--base-rounded-small); } } .backdrop{ background:rgba(0,0,0,0.6); position:absolute; top:0; left:0; width:100%; height:100vh; } .modal-header .btn-close{ position: absolute; top: 1rem; right: 1rem; } .modal__location{ width: 100%; border-radius: var(--base-rounded-medium); height: 16rem; }