* { box-sizing: border-box; }

        /* Side-by-Side Setup */
        .wrapper {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }

 .slideshow {
            flex: 1;
            min-width: 300px;
            max-width: 400px;
            height: 300px;
            position: relative;
            background-color: #222; /* Dark placeholder instead of white */
            background-size: cover;
            background-position: center;
            border-radius: 8px;
            overflow: hidden;
        }

        /* Pre-set the first image as a background to prevent "???" */
        #ss1 { background-color:#3f0307; }
        #ss2 { background-color:#3f0307; }
        #ss3 { background-color:#3f0307; }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            z-index: 1;
        }

        /* This class makes the image visible */
        .slide.active {
            opacity: 1;
            z-index: 2; 
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }