@charset "utf-8";
/* CSS Document */

<!--Style the Thumbnails -->

.gallery {
    display: flex;
    flex-wrap: wrap; /* Allows thumbnails to wrap to the next row if needed */
    gap: 10px; /* Adds spacing between thumbnails */
    justify-content: center; /* Centers thumbnails in the container */
}

.gallery a {
    display: block;
}

.gallery img {
    width: 360px; /* Adjust thumbnail size */
    height: auto;
    border-radius: 5px;
    border: 2px solid #ccc;
    transition: transform 0.2s ease-in-out;
}

.gallery img:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Responsive column layout */
    gap: 10px;
    justify-content: center;
}

<!-- Style the Fancybox Overlay & Background -->

.fancybox__container {
    background: rgba(0, 0, 0, 0.😎 !important; /* Darker background overlay */
}



<!-- Style the Close Button -->

.fancybox__button--close {
    background: red !important; /* Red close button */
    border-radius: 50%;
}
.fancybox__button--close svg {
    fill: white !important; /* White 'X' */
}



<!-- Style Navigation Arrows -->

.fancybox__button--prev,
.fancybox__button--next {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 50%;
}

.fancybox__button--prev:hover,
.fancybox__button--next:hover {
    background: rgba(255, 255, 255, 0.6) !important;
}



<!-- Style the Captions -->

.fancybox__caption {
    font-size: 18px;
    color: #ffcc00; /* Yellow text */
    font-weight: bold;
}