.container
  section.image(style="background-image: url(https://images.unsplash.com/photo-1504357121897-47698286288d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29c6dcd6a6f6c6a76c101e4336ae7c2d&auto=format&fit=crop&w=2851&q=80)")
  section.heading
    h1 So green!
  section.text(style="--bg: #c8c8bc")
    h1 Armenian highlands
  section.image(style="background-image: url(https://images.unsplash.com/photo-1538964173425-93884d739596?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e2f0390d79969aaf31e155bd1f7138b0&auto=format&fit=crop&w=1275&q=80)")
  section.heading
    h1 Hot! hot! hot!
  section.text(style="--bg: #638a87")
    h1 Paradise on earth
  section.image(style="background-image: url(https://images.unsplash.com/photo-1531306728370-e2ebd9d7bb99?ixlib=rb-0.3.5&s=2950e56dc2bba8a65b82f130aa4e47ea&auto=format&fit=crop&w=900&q=60)")
  section.heading
    h1 In a galaxy...
  section.text(style="--bg: #384558")
    h1 Far, far away...
  section.image(style="background-image: url(https://images.unsplash.com/photo-1538982198821-0714ff3d74ba?ixlib=rb-0.3.5&s=0550cf3351896481de327a10971739f1&auto=format&fit=crop&w=1251&q=80)")
  section.heading
    h1 Suits..
  section.text(style="--bg: #9dbdc4")
    h1 Up into the sky
.footer
  h3 Pretty cool right?

html,
body {
  background-color: black;
  font-family: sans-serif;
}
.container {
  height: 100vh;
  overflow: hidden;
  overflow-y: auto;
  perspective: 3px;
}

section {
  background-size: cover;
  color: white;
  background-color: var(--bg, --color-black);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  &.image {
    background-position: center center;
    transform: translateZ(-1px) scale(1.5);
    /* Force the background image to fill the whole element. */
    background-size: cover;
    /* Keep the image from overlapping sibling elements. */
    z-index: -1;
    height: 100vh;
  }
  &.text {
    height: 50vh;
  }
  &.heading {
    z-index: -1;
    transform: translateY(-30vh) translateZ(1px) scale(1.5);
  }
}

.footer {
  position: relative;
  display: block;
  background-color: black;
  height: 100vh;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  h3{
    font-weight: normal; 
    color: var(--color-blue);
  }
}