.galleryFullscreen { z-index: 100 !important; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; height: calc(100%); background-color: rgb(16, 15, 16); position: fixed; top: 0px; padding-top: 40px; .galleryFullscreenTitle { display: flex; justify-content: center; align-items: center; margin-top: -100px; h2 { text-align: center; color: white; } div { padding-left: 20px; padding-right: 20px; margin-inline: 10px; height: 15px; border-radius: 50px; background-color: rgb(255, 255, 255); padding-left: 5px; padding-right: 5px; padding-bottom: 2px; padding-top: -2px; letter-spacing: 1px; font-size: 12pt; font-weight: bold; display: flex; justify-content: center; align-items: center; color: black; } } .galleryFullscreenImgContainer { display: flex; justify-content: center; align-items: center; background-color: rgb(6, 6, 6, 0); img { width: 100%; max-height: 800px; aspect-ratio: 16/9; display: block; margin-left: auto; margin-right: auto; border-radius: 20px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } @media (min-width: 1920px) { width: 80em; } @media (max-width: 1700px) { width: 70em; } @media (max-width: 1450px) { width: 80%; } @media (max-width: 1180px) { width: 100%; img { border-radius: 0px; } } } .galleryFullscreenClose { top: 10px; right: 10px; cursor: pointer; } .galleryFullscreenBtn { color: white; width: 50px; height: 50px; position: absolute; cursor: pointer; transition: all 100ms linear; border-radius: 50px; &:hover { background-color: rgba(182, 182, 182, 0.15); } } .galleryFullscreenBtnCycle { top: calc(50vh - 25px); @media (max-width: 1180px) { background-color: rgba(28, 28, 28, 0.5); &:hover { background-color: rgba(28, 28, 28, 0.8); } } } .galleryFullscreenPrev { left: 50px; } .galleryFullscreenNext { right: 50px; } }