{%- require_css -%}
    <style>
        /* Style the pagination container */
        .swiper-pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px; /* Adjust spacing between thumbnails */
        }

        /* Style each pagination bullet */
        .swiper-pagination-bullet {
            width: 60px; /* Adjust thumbnail width */
            height: 40px; /* Adjust thumbnail height */
            opacity: 0.4; /* Default opacity */
            cursor: pointer;
            transition: opacity 0.3s;
            overflow: hidden;
            border: 2px solid transparent; /* Optional: Add border on active */
        }

        /* Style the images within bullets */
        .swiper-pagination-bullet img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Active bullet styling */
        .swiper-pagination-bullet-active {
            opacity: 1;
            border-color: #000; /* Adjust border color for active thumbnail */
        }
 

    </style>
{%- end_require_css -%}