<a class="yt" href="https://youtu.be/Ivk8Blw2VTI">Watch the tutorial</a>
<section>
  <div class="wrapper">
    <h1>Full-width on one side only</h1>
  </div>
</section>

<section class="full-width-split-screen">
  <img src="https://images.unsplash.com/photo-1689046194076-62199393c464?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTE1MDg5Mjl8&ixlib=rb-4.0.3&q=85" alt="" />
  <div>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit.
      Reprehenderit officiis dolores vitae sed libero ipsa.
    </p>
    <a href="#" class="button">Keep reading</a>
  </div>
</section>

<section>
  <div class="wrapper">

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse
      impedit cupiditate, quisquam reprehenderit rem nostrum quaerat
      tempore molestias magnam maxime omnis hic enim, autem tempora
      tenetur illo excepturi eaque fugiat.
    </p>

    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit.
      Reprehenderit officiis dolores vitae sed libero ipsa. Aut, eos
      accusantium, quas at laborum tempore ab quidem eum exercitationem
      odit excepturi incidunt iste.
    </p>

  </div>
</section>

<section class="full-width-split-screen">
  <div class="accent">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit officiis dolores vitae sed libero ipsa. Aut, eos accusantium, quas at laborum tempore ab quidem eum exercitationem odit excepturi incidunt iste.</p>
    <p>Deleniti voluptates harum nemo eos deserunt? Cum quos blanditiis dignissimos facilis , pariatur vel nostrum consectetur nesciunt in numquam.</p>
  </div>
  <img src='https://images.unsplash.com/photo-1689443111223-fdba9d92dbd7?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTE2OTAxMjB8&ixlib=rb-4.0.3&q=85' alt=''>
</section>

<section class="">
  <div class="wrapper">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse impedit cupiditate, quisquam reprehenderit rem nostrum quaerat tempore molestias magnam maxime omnis hic enim, autem tempora tenetur illo excepturi eaque fugiat.</p>

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit officiis dolores vitae sed libero ipsa. Aut, eos accusantium, quas at laborum tempore ab quidem eum exercitationem odit excepturi incidunt iste.</p>

</section>

<section class="full-width-split-screen">
  <div class="accent">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit officiis dolores vitae sed libero ipsa. Aut, eos accusantium, quas at laborum tempore ab quidem eum exercitationem odit excepturi incidunt iste.</p>
    <p>Deleniti voluptates harum nemo eos deserunt? Cum quos blanditiis dignissimos facilis , pariatur vel nostrum consectetur nesciunt in numquam.</p>
  </div>
  <div class="primary">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit officiis dolores vitae sed libero ipsa. Aut, eos accusantium, quas at laborum tempore ab quidem eum exercitationem odit excepturi incidunt iste.</p>
    <p>Deleniti voluptates harum nemo eos deserunt? Cum quos blanditiis dignissimos facilis , pariatur vel nostrum consectetur nesciunt in numquam.</p>
  </div>
</section>
<section class="">
  <div class="wrapper">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse impedit cupiditate, quisquam reprehenderit rem nostrum quaerat tempore molestias magnam maxime omnis hic enim, autem tempora tenetur illo excepturi eaque fugiat.</p>

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit officiis dolores vitae sed libero ipsa. Aut, eos accusantium, quas at laborum tempore ab quidem eum exercitationem odit excepturi incidunt iste.</p>

</section>

<section class="full-width-split-screen">
  <img src="https://images.unsplash.com/photo-1689046194076-62199393c464?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTE1MDg5Mjl8&ixlib=rb-4.0.3&q=85" alt="" />
  <img src='https://images.unsplash.com/photo-1689443111223-fdba9d92dbd7?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTE2OTAxMjB8&ixlib=rb-4.0.3&q=85' alt='' />
</section>
<section class="">
  <div class="wrapper">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse impedit cupiditate, quisquam reprehenderit rem nostrum quaerat tempore molestias magnam maxime omnis hic enim, autem tempora tenetur illo excepturi eaque fugiat.</p>

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit officiis dolores vitae sed libero ipsa. Aut, eos accusantium, quas at laborum tempore ab quidem eum exercitationem odit excepturi incidunt iste.</p>

</section>