Banner

<section id="shopify-section-template--19106266349914__16400990552675e254" class="shopify-section">
  <link href="//cdn.shopify.com/s/files/1/0607/5806/5368/t/64/assets/component-media-banner.css?v=30150157256196004681686742484" rel="stylesheet" type="text/css" media="all">
  <style data-shopify="">
    #Banner-template--19106266349914__16400990552675e254::after {
      opacity: 0.0;
      border-radius: 15rem;
    }

    @media screen and (min-width: 750px) {
      #Banner-template--19106266349914__16400990552675e254::after {
        border-radius: 0.75rem;
      }
    }

    .banner {
      margin-left: 0.5rem;
      margin-right: 0; /* Remove the margin to the right */
    }

    @media screen and (min-width: 750px) {
      .banner {
        margin-left: 1rem;
      }
    }

    .banner__heading {
      font-family: "Arial", sans-serif;
      padding-left: 25px;
      line-height: 1.2;
      font-size: 30px; /* Benchmark font size for H1 on desktop */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word;
    }

    .banner__subtitle {
      font-family: "Helvetica", sans-serif;
      margin-top: 0.5em;
      color: white;
      padding-left: 25px;
      font-size: 24px; /* Benchmark font size for H2 on desktop */
    }

    .banner__subheading {
      font-family: "Helvetica", sans-serif;
      padding-left: 25px;
      font-size: 20px; /* Benchmark font size for H3 on desktop */
    }

    .banner__content {
      height: 70vh; /* Adjust the percentage value to control the height */
      display: flex;
      align-items: center;
    }

    @media screen and (max-width: 767px) {
      .banner__heading,
      .banner__subtitle,
      .banner__subheading {
        padding-left: 0;
        font-size: 26px; /* Modified font size for H1, H2, H3 on mobile */
      }

      .banner__subtitle {
        font-size: 22px; /* Modified font size for H2 on mobile */
      }

      .banner__subheading {
        font-size: 16px; /* Modified font size for H3 on mobile */
      }
    }

    @media screen and (min-width: 750px) {
      .banner__heading {
        font-size: 55px; /* Modified font size for H1 on desktop */
      }
    }
  </style>

  <div id="Banner-template--19106266349914__16400990552675e254" class="banner banner--medium">
    <video playsinline="" loop="" autoplay="" muted="" class="banner__media banner-mobile">
      <source type="video/mp4" src="https://cdn.shopify.com/videos/c/o/v/47fb76c7a78c4179ba9d508588787a7a.mp4">
      <img src="" alt="" title="Your browser does not support the <video> tag">
    </video>
    <video playsinline="" loop="" autoplay="" muted="" class="banner__media banner-desktop">
      <source type="video/mp4" src="https://cdn.shopify.com/videos/c/o/v/47fb76c7a78c4179ba9d508588787a7a.mp4">
      <img src="" alt="" title="Your browser does not support the <video> tag">
    </video>
    <div class="banner__content banner__content--middle banner__mobile_content--top">
      <div class="banner__box">
        <h3 class="banner__subheading">Kompromissa inte med din hud och dina händer</h3>
        <h1 class="banner__heading" style="margin-top: 0.5em; margin-bottom: 0.2em;">HUD Liner - Ny textilupplevelse för dina händer och handskar</h1>
        <h2 class="banner__subtitle">Subtitle Goes Here</h2>
      </div>
    </div>
  </div>
</section>