Pattern Library

<div class="__js-root">
  <div class="header-carousel">
    <div class="h-[700px] xl:h-screen relative bg-white">
      <img
        class="header-carousel--image opacity-60 inline xl:hidden"
        src="{{ mobile_background_image_url }}"
      >

      <video
        class="header-carousel--image opacity-60 hidden xl:block"
        poster="{{ desktop_background_image_url }}"
        autoplay
        muted
        loop
        playsinline
        preload="metadata"
      >
        <source src="{{ desktop_video_url }}">
      </video>

      <div class="elections--header-carousel--text-wrapper hidden xl:block">
        <div
          class="container--wide h-full flex flex-col justify-end items-start"
        >
          <div class="2.5xl:ml-[-10rem]">
            <img
              class="w-4/6"
              src="{{ header_image_url }}"
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</div>