.hero-bg {
    background-image: url('../images/hero_bg_mobile.png');
    background-image: image-set(
        url('../images/hero_bg_mobile.avif') type('image/avif'),
        url('../images/hero_bg_mobile.webp') type('image/webp'),
        url('../images/hero_bg_mobile.png') type('image/png')
    );
}

@media (min-width: 768px) {
    .hero-bg {
        background-image: url('../images/hero_bg.png');
        background-image: image-set(
            url('../images/hero_bg.avif') type('image/avif'),
            url('../images/hero_bg.webp') type('image/webp'),
            url('../images/hero_bg.png') type('image/png')
        );
    }
}