.modal { height: inherit; } .modal-dialog { max-width: 100% !important; display: flex; height: 100vh; align-items: center; justify-content: center; } .modal__content{ div{ width: 50%; padding: 1.5rem; } } .modal-content { width: 60rem; height: 35rem; } .has-bg-dark { color: var(--base-color-white); } .modal__galery { display: grid; gap: 0.5rem; 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; } } /* .backdrop{ background-color: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; }