<!-- 
Photo credit: https://unsplash.com/photos/Nyvq2juw4_o 
-->

<main>
  <section class="hero">
    <figure class="hero__background">
      <img src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1244&q=80" alt="city scape" />
    </figure>
    <div class="hero__content">
      <span class="scale-text">
        empowering people
      </span>
      <span>through technology</span>
    </div>
  </section>

  <section class="content container">
    <div class="card">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis laborum velit alias excepturi aliquam. Aut, nihil illum! Quod aspernatur corrupti voluptate vero expedita dolorem provident! Ad mollitia excepturi iusto nesciunt.</p>
    </div>
    <div class="card">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis laborum velit alias excepturi aliquam. Aut, nihil illum! Quod aspernatur corrupti voluptate vero expedita dolorem provident! Ad mollitia excepturi iusto nesciunt.</p>
    </div>
    <div class="card">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis laborum velit alias excepturi aliquam. Aut, nihil illum! Quod aspernatur corrupti voluptate vero expedita dolorem provident! Ad mollitia excepturi iusto nesciunt.</p>
    </div>
    <div class="card">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis laborum velit alias excepturi aliquam. Aut, nihil illum! Quod aspernatur corrupti voluptate vero expedita dolorem provident! Ad mollitia excepturi iusto nesciunt.</p>
    </div>
    <div class="card">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis laborum velit alias excepturi aliquam. Aut, nihil illum! Quod aspernatur corrupti voluptate vero expedita dolorem provident! Ad mollitia excepturi iusto nesciunt.</p>
    </div>
    <div class="card">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis laborum velit alias excepturi aliquam. Aut, nihil illum! Quod aspernatur corrupti voluptate vero expedita dolorem provident! Ad mollitia excepturi iusto nesciunt.</p>
    </div>
    <div class="card">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis laborum velit alias excepturi aliquam. Aut, nihil illum! Quod aspernatur corrupti voluptate vero expedita dolorem provident! Ad mollitia excepturi iusto nesciunt.</p>
    </div>
    <div class="card">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis laborum velit alias excepturi aliquam. Aut, nihil illum! Quod aspernatur corrupti voluptate vero expedita dolorem provident! Ad mollitia excepturi iusto nesciunt.</p>
    </div>
  </section>
</main>

* {
  box-sizing: border-box;
}

body {
  background: #efefef;
  overflow-x: hidden;
}

.hero {
  height: 500px;
  width: 100vw;
  position: relative;
  overflow: hidden;
  &__background {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
  &__content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    span {
      color: white;
      font-size: 4rem;
      text-shadow: 2px 2px 4px #333;
      animation: fade-in 0.75s ease-in-out forwards;
      opacity: 0;
    }
    span:last-child {
      animation-delay: 0.5s;
    }
    .scale-text {
      z-index: 10;
    }
  }
}

.content {
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
  gap: 1rem;
}

.container {
  --container-width: 120ch;

  width: min(var(--container-width), 100% - 3rem);
  margin-inline: auto;
}

.card {
  padding: 1rem;
  background: white;
  opacity: 0;
  transform:translateY(40px);
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

const tl = new gsap.timeline({
  scrollTrigger: {
    trigger: ".hero",
    start: "top top",
    scrub: 2
  }
});

tl.to(".scale-text", {
  scale: 10
})
  .to(
    ".hero",
    {
      opacity: 0
    },
    "<25%"
  )
  .to(
    ".card",
    {
      opacity: 1,
      duration: 1,
      y: 0,
      stagger: 0.5,
      ease: "back.out(1.7)"
    },
    "<25%"
  );