/* Range Slider Controls Container */
        .controls-container {
            /* background-color: #f9fafb; bg-gray-50 */
            padding: 3rem; /* p-6 */
            /* border-radius: 1rem; rounded-2xl */
            /* box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); shadow-inner */
            margin-bottom: 2rem; /* mb-8 */
            display: flex;
            flex-direction: column; /* flex-col */
            gap: 1.5rem; /* gap-6 */
            position: relative;
        }

        /* Range Input Styling */
        input[type="range"] {
            width: 100%; /* w-full */
            height: 0.5rem; /* h-2 */
            /* background-color: #a5b4fc; bg-indigo-200 */
            border-radius: 0.5rem; /* rounded-lg */
            -webkit-appearance: none; /* appearance-none */
            appearance: none; /* cursor: pointer; */
            outline: none; /* Remove outline on focus */
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 1rem; /* width: 16px */
            height: 1rem; /* height: 16px */
            background-color: #a27884; /* Indigo-500 */
            border-radius: 50%;
            cursor: grab;
            box-shadow: 0 0 0 4px #73545c; /* Inner glow */
            margin-top: -0.25rem; /* Adjust thumb vertical position to align with track center */
            transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }

        input[type="range"]::-moz-range-thumb {
            width: 1rem;
            height: 1rem;
            background-color: #a27884;
            border-radius: 50%;
            cursor: grab;
            box-shadow: 0 0 0 4px #73545c;
            transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }

        input[type="range"]:active::-webkit-slider-thumb {
            cursor: grabbing;
            transform: scale(1.1);
        }

        input[type="range"]:active::-moz-range-thumb {
            cursor: grabbing;
            transform: scale(1.1);
        }

        /* Range Track Styling (modern browsers) */
        input[type="range"]::-webkit-slider-runnable-track {
            height: 0.25rem; /* Thinner track */
            background-color: #a27884; /* Indigo-200 */
            border-radius: 9999px; /* Fully rounded */
        }

        input[type="range"]::-moz-range-track {
            height: 0.25rem;
            background-color: #a27884;
            border-radius: 9999px;
        }

        /* Image Scroller Container */
        .image-scroller-container {
            /* display: grid; */
            /* grid-template-columns: 25% 75%; */
            overflow-x: hidden;
            /* padding-left: 2%; */
            /* width: 98%; */
        }

        .image-container{
            overflow: overlay; 
            width: 100%;
            max-width: fit-content;
            margin: 12% auto;
            scrollbar-width: none;
        }

        /* Individual Image Wrapper */
        .image-wrapper {
            display: grid;
            /* grid-template-columns: 3fr 2fr; */
            grid-template-areas: "1 1 1" "b1 b2 b3";
            grid-template-columns: 40% 100% 100% 100%;
            flex-shrink: 0;
            width: 60%; /* w-96 (384px) */
            max-width: max-content;
            height: auto; /* h-auto */
            /* border-radius: 1rem; rounded-2xl */
            overflow: visible;
            /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); shadow-lg */
            /* border: 1px solid #e5e7eb; border border-gray-200 */
            position: relative; /* For absolute positioning of index span */
        }

        .image-wrapper > div.r1 {grid-column: 1 / span 4; grid-row: 1;}
        .image-wrapper > a.b1 {grid-column: 2;grid-row: 2;}
        .image-wrapper > a.b2 {grid-column: 3;grid-row: 2;}
        .image-wrapper > a.b3 {grid-column: 4;grid-row: 2;}