#our-community-section {
    background-image: url('../assets/our-community/bg-image.webp');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#animation-studio-section {
    background-image: url('../assets/animation-studio/bg-image.webp');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

#virtual-guide-section {
    background-image: url('../assets/virtual-guide/virtual-bg.webp');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

#our-services-section {
    background-image: url('../assets/our-services/our-services-bg.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

#our-products-section {
    background-image: url('../assets/our-products/bg-image.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

#workshops-section {
    background-image: url('../assets/workshops/bg-image.webp');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

/* Side by side the section is close to the artwork's own 3:2, so stretching it
   keeps the drawn props parked in the corners. Taller stacked layouts crop
   instead — stretching there would smear them. */
@media (min-width: 1024px) {
    #workshops-section {
        background-size: 100% 100%;
        background-position: center;
    }
}