<div class="svg-container">
      <video class="video-background" autoplay loop muted>
        <source src="https://videos.pexels.com/video-files/7522220/7522220-uhd_2560_1440_25fps.mp4" type="video/mp4" />
      </video>
      <svg viewBox="0 0 400 210">
        <defs>
          <mask id="mask">
            <rect width="400" height="210" x="0" fill="#fff" />
            <rect width="120" height="20" x="155" y="20" fill="red" />
            <rect width="60" height="20" x="115" y="60" fill="red" />
            <rect width="88" height="20" x="155" y="100" fill="red" />
            <rect width="220" height="20" x="170" y="140" fill="red" />
          </mask>
        </defs>
        <rect width="400" height="210" fill="#000" mask="url(#mask)" />
        <text
          style="font-size: 32px"
          font-family="Oswald"
          font-weight="bold"
          fill="#fff"
          x="10px"
          y="40px">
          We're here
        </text>
        <text
          style="font-size: 32px"
          font-family="Oswald"
          font-weight="bold"
          fill="#fff"
          x="285px"
          y="40px">
          to make
        </text>
        <text
          style="font-size: 32px"
          font-family="Oswald"
          font-weight="bold"
          fill="#fff"
          x="10px"
          y="80px">
          healthy
        </text>
        <text
          style="font-size: 32px"
          font-family="Oswald"
          font-weight="bold"
          fill="#fff"
          x="184px"
          y="80px">
          living effortless
        </text>
        <text
          style="font-size: 32px"
          font-family="Oswald"
          font-weight="bold"
          fill="#fff"
          x="10px"
          y="120px">
          so you can
        </text>
        <text
          style="font-size: 32px"
          font-family="Oswald"
          font-weight="bold"
          fill="#fff"
          x="250px"
          y="120px">
          live longer
        </text>
        <text
          style="font-size: 32px"
          font-family="Oswald"
          font-weight="bold"
          fill="#fff"
          x="10px"
          y="160px">
          and happier
        </text>
      </svg>
    </div>

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

      body {
        margin: 0;
        padding: 0;
        background-color: black;
        overflow: hidden;
      }
      .svg-container {
        position: relative;
        width: 800px;
        height: 420px;
        margin: 0 auto;
        overflow: hidden;
      }
      .video-background {
        position: absolute;
        top: 0;
        left: 10px;
        width: 95%;
        height: 95%;
        object-fit: cover;
        z-index: -1;
      }
      svg {
        width: 100%;
        height: 100%;
      }
      @media (max-width: 800px) {
        .svg-container {
          width: 100%;
          height: auto;
          aspect-ratio: 400 / 210;
        }
      }