07-07-2025 (02)

<script>
// Vanilla JavaScript version
document.addEventListener('DOMContentLoaded', function() {
    const gallery = document.querySelector('.sqs-gallery');
    const container = document.querySelector('.sqs-gallery-container');
    const slides = document.querySelectorAll('.slide');
    
    function resizeGallery() {
        if (!container || !gallery) return;
        
        const containerWidth = container.offsetWidth;
        const aspectRatio = 1.5;
        const newHeight = containerWidth / aspectRatio;
        
        gallery.style.height = newHeight + 'px';
        
        slides.forEach(slide => {
            const img = slide.querySelector('img');
            if (!img) return;
            
            img.style.width = containerWidth + 'px';
            img.style.height = newHeight + 'px';
            img.style.objectFit = 'cover';
            img.style.position = 'absolute';
            img.style.left = '0';
            img.style.top = '0';
        });
    }
    
    // Initial resize
    resizeGallery();
    
    // Resize on window change with debounce
    let resizeTimer;
    window.addEventListener('resize', function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(resizeGallery, 250);
    });
});
</script>
<style>
.sqs-gallery-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.sqs-gallery {
    width: 100%;
    position: relative;
}

.slide img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
}
</style>