.lg-outer {
    background-color: var(--light-trans);
}

.lg-toolbar .lg-icon,
.lg-toolbar .lg-counter {
    color: var(--dark)!important;
}

.lg-outer .lg-content {
    position: absolute;
    top: 15%;
    left: 15%;
    right: 15%;
    bottom: 15%;
}

.lg-backdrop {
    background-color:#ffffffbf;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: backdrop-filter 0.3s ease-in-out;
}
.lg-next, .lg-prev {
    color: var(--light);
}

.slick-track {
    display: flex;
    gap: 10px;
}

.slick-prev, .slick-next {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    border: none;
    width: 100px;
    font-size: 2rem;
    color: var(--clr1);
    background-color: transparent;
}

.slick-prev {
    left:0;
}
.slick-next {
    right: 0;
}

.slick-dots {
    padding-top: 5px;
    gap:10px;
    display: flex;
    justify-content: center;
}

.slick-dots button {
    font-size: 0px;
    border-radius: 50%;
    padding:0;
    width: 8px;
    height: 8px;
    border: none;
    background-color: var(--white);
    transition: background-color 0.3s ease;
}

.slick-dots .slick-active button,
.slick-dots button:hover {
    background-color: var(--light);
}

@media (max-width:992px) {
    .lg-outer {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: #000000bf;
    }
    
    .lg-outer .lg-content {
      position: absolute;
      top: 5%;
      left: 5%;
      right: 5%;
      bottom: 5%;
    }
}

.massonry-gallery {
    display: none!important;
}

.massonry-gallery.flexmasonry {
    display:flex!important;
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn {
    to {
        opacity:1;
    }
}
.massonry-gallery.flexmasonry > picture {
    padding: 5px;
}
.massonry-gallery picture {
    width:100%;
    height: auto;
    display:block;
}