<div class="main">

  <div class="content-grid">
    <div class="content-grid-title">
      <h1>Unlock Life</h1>
    </div>
    <div class="content-grid__scroll">

      <div class="content-grid__sticky">

        <div class="content-grid__items">
          <div class="grid__item"><img src="https://i.ibb.co/wLnjZDW/photo-1575102890923-2d7afc68fdd8.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/GkvVvSs/andrey-zvyagintsev-a2-YKC0ux-Oaw-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/2h127L2/stories-wxrrcb-KLTX0-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/1sFydrH/naail-hussain-Raj-S9-Wfnw-E-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/jJmPK3S/photo-1573976366083-5ce0d56439cf.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/gw7NRr2/clayton-cardinalli-wodb3-Pm3-E-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/3csj2wj/hu-chen-E5nq-Fil-Jb-UI-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/d0rBQnP/photo-1573370280818-48d5e5299afa.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/WvqxJSB/alabaster-co-ZMZD5hby0cg-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/0c2280j/natalya-letunova-j-Cz-Jsi-Yi-Ws-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/VJBLvW5/bogdan-che-a-NSAg7f1-VLMk-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/jfWDx2R/hector-falcon-Ss-A5-Tl-Mmg-AY-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/44gRxBq/joshua-rawson-harris-v-n-X1l4sdzo-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/pZnBgPL/lucas-mendes-n-XYkvqwn8-UQ-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/PN4PsbN/bill-xi-8j-Jl-YMVU4-Tg-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/2vmJSvQ/said-alamri-c-IUozi9-BM34-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/MS6FtN4/jess-harper-sunday-t-BKYoc-Akz-RU-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/27GQ3zt/aleksander-borzenets-HOl3-K2p-EIQg-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/1sg7J1V/photo-1575275402138-8b840cf4504f.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/dPcb2k6/ivars-utinans-FZPv-Eam-SYD8-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/BVcmmLn/aleksander-borzenets-9-RNsy90-On-U0-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/GP6HGmL/the-honest-company-Ai-ADE3prv90-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/p4ts0cR/ron-mcclenny-pwh-GHarpll-Q-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/zXpMTDy/sergey-pesterev-GYIxd-UFEk-X8-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/4J7B10B/the-honest-company-SYIpx-U6la-A0-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/M7X7y1C/drew-dempsey-d-MQSSJvbk-G4-unsplash.jpg" alt="" class="grid__item_image"></div>
          <div class="grid__item"><img src="https://i.ibb.co/xFtt8hQ/photo-1530071698688-1e4c30e1ea52.jpg" alt="" class="grid__item_image"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="band-center-text">
    <h2>We believe that city life is a beautiful life.</h2>
  </div>

  <div class="content-cards-page">
    <div class="content-cards__item"></div>
    <div class="content-cards__item"></div>
    <div class="content-cards__item"></div>
    <div class="content-cards__item"></div>
  </div>
</div>

:root {
  --aspect-ratio: calc(9 / 16);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: black;
  font-family: Roboto, sans-serif;
  overflow-x: hidden;
}

img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

h1, h2 {
  margin: 0;
}

.content-grid {
  --gridOpacity: 0;
  --gridScale: 2;
  --gridTranslate: 5vh;
  width: 100%;
}

.content-grid__scroll {
  min-height: 215vh;
  position: relative;
}

.content-grid__sticky {
  position: sticky;
  height: calc(100vh + 75px);
  top: 75px;
}

.content-grid__items {
  max-width: 1600px;
  width: 200vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(3, 36vh);
  grid-gap: 0.5vw;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translatex(-50%) scale(var(--gridScale));
  transform-origin: center top;
}

.content-grid-title{
  position: absolute;
  top: 0;
  line-height: calc(100vh - 6vw *  var(--aspect-ratio));
  text-align: center;
  z-index: 100;
  width: 100%;
  color: white;
  font-size: calc(6vw * var(--aspect-ratio));
  opacity: calc(1 - var(--gridOpacity));
  letter-spacing: 0.15rem;
}

.grid__item:nth-child(1),
.grid__item:nth-child(9),
.grid__item:nth-child(10),
.grid__item:nth-child(18),
.grid__item:nth-child(19),
.grid__item:nth-child(27) {
  transform: translatey(calc(var(--gridTranslate) * 8));
}

.grid__item:nth-child(2),
.grid__item:nth-child(8),
.grid__item:nth-child(11),
.grid__item:nth-child(17),
.grid__item:nth-child(20),
.grid__item:nth-child(26) {
  transform: translatey(calc(var(--gridTranslate) * 6));
}

.grid__item:nth-child(3),
.grid__item:nth-child(7),
.grid__item:nth-child(12),
.grid__item:nth-child(16),
.grid__item:nth-child(21),
.grid__item:nth-child(25) {
  transform: translatey(calc(var(--gridTranslate) * 4));
}

.grid__item:nth-child(4),
.grid__item:nth-child(6),
.grid__item:nth-child(13),
.grid__item:nth-child(15),
.grid__item:nth-child(22),
.grid__item:nth-child(24) {
  transform: translatey(calc(var(--gridTranslate) * 2));
}

.grid__item:not(:nth-child(5)) {
  opacity: var(--gridOpacity);
}

.band-center-text {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1.3rem;
  background-color: black;
}

.content-cards-page {
  display: flex;
  height: 100vh;
  padding-top: 10vh;
  padding-bottom: 10vh;
  background-color: white;
  align-items: center;
  justify-content: space-between;
  padding-left: 10%;
}

.content-cards__item {
  width: calc(100% / 4 - 3%);
  height: 50%;
  background-size: cover;
  background-position: center;
}

.content-cards__item:nth-child(1) {
  background-image: url(https://i.ibb.co/2n7MG0R/photo-1552959988-b94b76838365.jpg);
}

.content-cards__item:nth-child(2) {
  background-image: url(https://i.ibb.co/2n7MG0R/photo-1552959988-b94b76838365.jpg);
}

.content-cards__item:nth-child(3) {
  background-image: url(https://i.ibb.co/2n7MG0R/photo-1552959988-b94b76838365.jpg);
}

.content-cards__item:nth-child(4) {
  background-image: url(https://i.ibb.co/2n7MG0R/photo-1552959988-b94b76838365.jpg);
}

SmoothScroll({
  // Scrolling Core
  animationTime: 400, // [ms]
  stepSize: 100, // [px]

  // Acceleration
  accelerationDelta: 50, // 50
  accelerationMax: 3, // 3

  // Keyboard Settings
  keyboardSupport: true, // option
  arrowScroll: 50, // [px]

  // Pulse (less tweakable)
  // ratio of "tail" to "acceleration"
  pulseAlgorithm: true,
  pulseScale: 4,
  pulseNormalize: 1,

  // Other
  touchpadSupport: false, // ignore touchpad by default
  fixedBackground: true,
  excluded: ""
});

const gridContent = document.querySelector(".content-grid");
const gridTitle = gridContent.querySelector(".content-grid-title");
const gridScroll = gridContent.querySelector(".content-grid__scroll");
const items = gridContent.querySelectorAll(".grid__item");

const initialValue = {
  scale: 2,
  translate: 5
};

const getScroll = e => {
  const yNormalized = Math.min(window.scrollY / innerHeight, 1);

  gridContent.style.setProperty("--gridOpacity", yNormalized);
  gridContent.style.setProperty(
    "--gridScale",
    initialValue.scale - yNormalized
  );
  gridContent.style.setProperty(
    "--gridTranslate",
    5 - initialValue.translate * yNormalized + "vh"
  );
  gridTitle.style.setProperty("--gridOpactiy", yNormalized);
};

window.addEventListener("scroll", e => getScroll(e));