<div class="page-wrapper">
      <div class="section">
        <div class="container">
          <h1 class="title text-black">The background-image technique</h1>
          <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 class="prose">
            <h3 class="subtitle">Lorem ipsum dolor sit amet consectetur.</h3>
            <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>
      </div>
      <div class="section">
        <div class="container">
          <div class="columns">
            <div class="content">
              <div class="is-sticky-top">
                <h2 class="title text-black">The background-image technique</h2>
                <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>
                <ul>
                  <li class="item text-black">
                    <div class="item-icon-container">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="item-icon"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="white"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
                        />
                      </svg>
                    </div>
                    <div class="item-content">
                      <div class="subtitle text-black font-bold">Item #1</div>
                      <p class="text-gray">
                        Lorem ipsum, dolor sit amet consectetur adipisicing
                        elit. Impedit, modi neque? Quae ut commodi officia omnis
                        maiores perferendis obcaecati ea, praesentium eius quis
                        in! Delectus molestiae dicta sunt iure est.
                      </p>
                    </div>
                  </li>
                  <li class="item text-black">
                    <div class="item-icon-container">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="item-icon"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="white"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
                        />
                      </svg>
                    </div>
                    <div class="item-content">
                      <div class="subtitle text-black font-bold">Item #2</div>
                      <p class="text-gray">
                        Lorem ipsum, dolor sit amet consectetur adipisicing
                        elit. Impedit, modi neque? Quae ut commodi officia omnis
                        maiores perferendis obcaecati ea, praesentium eius quis
                        in! Delectus molestiae dicta sunt iure est.
                      </p>
                    </div>
                  </li>
                  <li class="item text-black">
                    <div class="item-icon-container">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="item-icon"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="white"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
                        />
                      </svg>
                    </div>
                    <div class="item-content">
                      <div class="subtitle text-black font-bold">Item #3</div>
                      <p class="text-gray">
                        Lorem ipsum, dolor sit amet consectetur adipisicing
                        elit. Impedit, modi neque? Quae ut commodi officia omnis
                        maiores perferendis obcaecati ea, praesentium eius quis
                        in! Delectus molestiae dicta sunt iure est.
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="image-container">
              <div class="image"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="container">
          <h2 class="title text-black">
            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>
          <div class="prose">
            <h3 class="subtitle">Lorem ipsum dolor sit amet consectetur.</h3>
            <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 class="prose">
            <h3 class="subtitle">Lorem ipsum dolor sit amet consectetur.</h3>
            <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 class="prose">
            <h3 class="subtitle">Lorem ipsum dolor sit amet consectetur.</h3>
            <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>
          <a href="#" class="btn primary">Main CTA</a>
          <a href="#" class="btn secondary"> Secondary CTA </a>
        </div>
      </div>
    </div>

/* quick CSS fix + some utils */
      * {
        padding: 0;
        margin: 0;
        color: #575757;
        font-family: monospace, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
          sans-serif;
      }
      .page-wrapper {
        width: 100%;
      }
      .section {
        padding: 2rem 0px;
      }
      .container {
        margin: 0px auto;
        width: 85%;
      }
      .columns {
        display: flex;
        gap: 2rem;
      }
      .columns > div {
        width: 50%;
      }
      .is-sticky-top {
        position: sticky;
        top: 1rem;
      }
      .text-black {
        color: #000;
      }
      .text-gray {
        color: #575757;
      }
      .font-bold {
        font-weight: 800;
      }

      .image {
        /* IMPORTANT This is the part related to the effect */
        background-image: url("https://images.unsplash.com/photo-1582015752624-e8b1c75e3711?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YnVzaW5lc3MlMjBtYW4lMjBzdWl0JTIwZ3JlZW58ZW58MHx8MHx8&auto=format&fit=crop&w=900&q=60");
        background-attachment: fixed;

        background-position: 100% 0%;
        background-repeat: no-repeat;
        background-size: auto;

        width: 100%;
        height: 600px;

        border-radius: 25px;
      }
      @media screen and (min-width: 1700px) {
        .container {
          max-width: 1600px;
        }
        .image-container {
          display: flex;
          justify-content: center;
        }
        .image {
          width: 900px;
          background-position: 74% 50%;
        }
      }
      @media screen and (max-width: 1240px) {
        .columns {
          flex-wrap: wrap;
        }
        .columns > div {
          width: 100%;
        }
        .image-container {
          display: flex;
          justify-content: center;
        }
        .image {
          /* width: 600px; */
          background-position: 83% 50%;
        }
      }
      @media screen and (max-width: 400px) {
        .image-container {
          display: flex;
          justify-content: center;
        }
        .image {
          /* width: 600px; */
          background-position: 50% 50%;
        }
      }

      /* 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;
      }
      .btn {
        display: inline-block;
        margin-top: 0.5rem;
        padding: 1rem 2rem;
        font-weight: 500;
        font-size: 1.15rem;
      }
      .btn.primary {
        border-radius: 4px;
        background-color: #10b981;
        color: #fff;
        text-decoration: none;
      }
      .btn.primary:hover {
        background-color: #059669;
      }
      .btn.secondary {
        color: #10b981;
        text-decoration: underline;
      }
      .btn.secondary:hover {
        color: #059669;
      }
      .item {
        display: flex;
        gap: 1rem;
        padding: 1rem 0;
      }
      .item-icon {
        width: 32px;
        height: 32px;
        display: inline-block;
        color: #fff;
        background: #10b981;
        padding: 0.5rem;
        border-radius: 7px;
      }
      .prose {
        padding: 1.5rem 0;
      }
      .prose > p {
        margin-bottom: 1.25rem;
      }