.gallery{max-width:80rem;margin:2rem auto;.single-item{position:relative;display:inline-block;&:hover{cursor:pointer}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(249,76,76,0);transition:background-color 0.3s ease;padding-right:calc(var(--bs-gutter-x)* 0.5);padding-left:calc(var(--bs-gutter-x)* 0.5);&:hover{background-color:var(--bs-primary) !important;padding-right:calc(var(--bs-gutter-x)* 0.5);padding-left:calc(var(--bs-gutter-x)* 0.5);opacity:.4}}.lightbox-image{display:none;.close-btn{display:none}.lightbox-nav{display:none}}&.active{.lightbox-image{visibility:visible;opacity:1;transition:visibility 0.8s ease-in-out;position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;background-color:rgba(0,0,0,0.7);display:flex;justify-content:center;align-items:center;.close-btn{display:block;position:absolute;top:5rem;right:1rem;cursor:pointer;color:var(--bs-primary);font-size:3rem;z-index:1000;padding:.5rem 1rem}img{max-width:80%;max-height:80%;object-fit:contain;display:block}.lightbox-nav{.prev-btn,.next-btn,.close-btn{display:block;padding:.5rem 1rem;background-color:#fff;color:var(--bs-primary)}}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;width:100%;height:100%;z-index:2}.prev-btn{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:3rem;cursor:pointer}.next-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:3rem;cursor:pointer}}}}}