---
default_section_classes: "px-5 pt-11 m--pt-12"
default_headline_classes: "title-2 mt-0 ta-center m--title-3 l--mb-6"
default_description_classes: "body-3 fw-500 mb-8 ta-center m--px-11 m--mb-10"
---
{{#
/**
 * @name block/billboard
 * @description A partial for a block billboard. You must define `bg_color` and `headline_color` in your template
 * @property {string} [default_section_classes=px-5 pt-11 m--pt-12]
 * @todo Document property vars
 */
#}}
<section class="{{ bg_color }} {{ custom_section_classes or default_section_classes }}">
  <div class="mw-grid mx-auto">
    <h2 class="{{ headline_color }} {{ custom_headline_classes or default_headline_classes }}">{{ billboard_headline | widont }}</h2>
    <p class="{{ description_color or headline_color }} {{ custom_description_classes or default_description_classes }}">{{ billboard_description | widont }}</p>
    <picture class="block lh-0 {{ custom_picture_classes }}">
      <source srcset="{{ billboard_image_mobile or billboard_image }}" media="(max-width: 720px)">
      {{ asset:billboard_image }}
      <img src="{{ url }}" alt="{{ alt }}" class="mx-auto w-100 {{ custom_image_classes }}">
      {{ /asset:billboard_image}}
    </picture>
  </div>
</section>