Pattern Library

<div class="__js-root">
  <div class="header-carousel">
    <div
      class="
        {% block wrapper_classes %}
          block h-[700px] xl:h-screen relative
        {% endblock %}

        group cursor-pointer
      "
    >
      <video
        class="
          header-carousel--image
          lg:hidden
        "
        autoplay
        muted
        loop
        playsinline
        preload="metadata"
        poster="{{ mobile_background_image }}"
      >
        {% if mobile_background_video %}
          <source src="{{ mobile_background_video }}">
        {% endif %}
      </video>

      <video
        class="
          header-carousel--image
          hidden lg:block
        "
        autoplay
        muted
        loop
        playsinline
        preload="metadata"
        poster="{{ desktop_background_image }}"
      >
        {% if desktop_background_video %}
          <source src="{{ desktop_background_video }}">
        {% endif %}
      </video>

      <div
        class="
          {% block text_wrapper_class %}
            header-carousel--text-wrapper
          {% endblock %}
        "
        style="box-sizing: border-box"
      >
        <h1
          class="
            {% block text_inner_wrapper_classes %}
              container--wide px-0 h-full flex flex-col justify-end items-start
            {% endblock %}
          "
          style="box-sizing: border-box"
        >

          <div class="mb-4 px-5 flex flex-col text-black lg:hidden">
            <div>{{ mobile_label_first }}</div>
            <div>{{ mobile_label_second }}</div>
            <div>{{ mobile_label_third }}</div>
          </div>

          <div class="mb-4 px-5 flex-col text-black hidden lg:flex">
            <div>{{ desktop_label_first }}</div>
            <div>{{ desktop_label_second }}</div>
          </div>

          <div class="ml-4 text-lg group">
            {% include "patterns/atoms/buttons/round_button.html" with button_text=button_text %}
          </div>
        </h1>
      </div>
    </div>
  </div>
</div>