/* Slideshow container */
.slideshow-container {
    position: relative;
    max-width: 320px;
    /* Match the original image width */
    height: auto;
    /* Adjust based on image aspect ratio, or set fixed height if images vary */
    margin: 0 auto;
    /* Center it if needed, though original was just an img */
    overflow: hidden;
    /* Hide anything overflowing */
}

/* Hide the images by default */
.mySlides {
    display: none;
    width: 100%;
    /* Position absolute to stack them on top of each other if we want crossfade, 
       but for simple replacement display: none is enough with fade animation.
       However, to crossfade properly without jumping, absolute position is better 
       BUT we need a container height. 
       Let's stick to simple display switching with animation for now to avoid layout shift issues if heights vary slightly,
       or just simple width 100% and let flow content dictate height. 
       Given existing layout, simple fade is safer.
    */
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/* Ensure images fit nicely */
.slideshow-container img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}