{{#
	@name Background image CSS
	@desc Include this partial if you need a CSS background image with optional focus point support. Just inlude this partial and provide an image attribute (the actual asset) and a class attribute to which the background image should be applied.
#}}

<!-- /snippets/_background_image.antlers.html -->
<style>
    {{ glide :src="image" }}
        .{{ class }} {
            background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,0.65) 100%), url("{{ glide:image preset='md' }}");
            background-position: {{ focus_css or 'center' }};
        }

        @media only screen and (min-width: 320px) {
            .{{ class }} {
                background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,0.65) 100%), url("{{ glide:image preset='sm-webp' }}");
            }
        }

        @media only screen and (min-width: 480px), only screen and (min-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
            .{{ class }} {
                background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,0.65) 100%), url("{{ glide:image preset='md-webp' }}");
            }
        }

        @media only screen and (min-width: 768px), only screen and (min-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
            .{{ class }} {
                background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,0.65) 100%), url("{{ glide:image preset='lg-webp' }}");
            }
        }

        @media only screen and (min-width: 1280px), only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
            .{{ class }} {
                background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,0.65) 100%), url("{{ glide:image preset='xl-webp' }}");
            }
        }

        @media only screen and (min-width: 1440px), only screen and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 2) {
            .{{ class }} {
                background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,0.65) 100%), url("{{ glide:image preset='2xl-webp' }}");
            }
        }
    {{ /glide }}
</style>
<!-- End: /snippets/_background_image.antlers.html -->