<div class="page-wrapper">
      <div class="section">
        <div class="container">
          <div class="columns">
            <div class="content">
              <h1 class="title">The clip-path technique</h1>
              <p class="subtitle">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Mollitia ipsam eius possimus! Cum eos sunt magni rerum alias ut
                quae eum doloremque quaerat ducimus. Quidem voluptas quia
                explicabo distinctio. Iste.
              </p>
            </div>
            <div class="image-container">
              <img
                src="https://images.unsplash.com/flagged/photo-1573603867003-89f5fd7a7576?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=892&q=80"
                class="image"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="container">
        <h2 class="title">
          Extra content so the page is long enough to see the effect
        </h2>
        <p class="subtitle">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab iusto
          culpa sunt vero beatae ut voluptates, consequatur dignissimos sapiente
          quas accusantium aspernatur nostrum adipisci repellendus ullam unde
          cupiditate, neque debitis.
        </p>
        <p class="subtitle">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab iusto
          culpa sunt vero beatae ut voluptates, consequatur dignissimos sapiente
          quas accusantium aspernatur nostrum adipisci repellendus ullam unde
          cupiditate, neque debitis.
        </p>
        <p class="subtitle">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab iusto
          culpa sunt vero beatae ut voluptates, consequatur dignissimos sapiente
          quas accusantium aspernatur nostrum adipisci repellendus ullam unde
          cupiditate, neque debitis.
        </p>
      </div>
    </div>

/* quick CSS fix */
      * {
        padding: 0;
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      }
      .page-wrapper {
        width: 100%;
      }
      .section {
        padding: 5rem 0px;
      }
      .container {
        margin: 0px auto;
        width: 85%;
      }
      .columns {
        display: flex;
        gap: 2rem;
      }
      .columns div {
        width: 50%;
      }

      .image-container {
        position: relative;
        height: 200px;
        clip-path: inset(0);
        border-radius: 25px;
      }

      .image {
        /* IMPORTANT This is the part related to the effect */
        object-fit: cover;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;

        padding: 2rem;
        border-radius: 25px;
      }

      /* some extra CSS to make this pretty */
      .hero h1,
      .hero p {
        max-width: 75%;
        margin-left: auto;
        margin-right: auto;
      }
      .title {
        margin-bottom: 1rem;
      }
      .subtitle {
        margin-bottom: 0.75rem;
      }