.Lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 80%); display: flex; align-items: center; justify-content: center; z-index: 10000; .image { max-width: 90%; max-height: 80%; cursor: pointer; } .close { position: absolute; top: 20px; right: 40px; font-size: 30px; color: white; cursor: pointer; width: 20px; height: 20px; } .zoomControls { display: flex; position: absolute; bottom: 16px; left: 50%; height: 24px; gap: 1rem; transform: translateX(-50%); .control { border-radius: 50%; width: 24px; height: 24px; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; color: #fff; } } }