liebling/partials/hero.hbs

{{!--
If the template in question has a background image, then we render responsive image styles
for it, and apply those styles to the <header> tag.
--}}

{{#if background}}
  {{#contentFor "herobackground"}}
  <style>
    .m-hero__picture {
      background-image: url({{img_url background size='xl'}});
    }
  
    @media(max-width: 1000px) {
      .m-hero__picture {
        background-image: url({{img_url background size='l'}});
      }
    }
  
    @media(max-width: 600px) {
      .m-hero__picture {
        background-image: url({{img_url background size='m'}});
      }
    }
  </style>
  {{/contentFor}}

  <header class="m-hero with-picture" data-aos="fade">
    {{#is "post"}}
      <div class="m-hero__picture in-post"></div>
    {{else}}
      <div class="m-hero__picture"></div>
    {{/is}}
{{else}}
  <header class="m-hero" data-aos="fade">
{{/if}}