<div class="page-container">
  <header>
    <h1>
      <span class="heading__outer">
        <span class="heading__inner">Make</span>
      </span>
      <span class="heading__outer">
        <span class="heading__inner">an</span>
      </span>
      <span class="heading__outer">
        <span class="heading__inner">impact</span>
      </span>
      <span class="heading__outer">
        <span class="heading__inner">with</span>
      </span>
      <span class="heading__outer">
        <span class="heading__inner">shadow</span>
      </span>
    </h1>
  </header>
  <footer>
    <p>Photo by <a href="https://unsplash.com/@htroupe?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Hannah Troupe</a> on <a href="https://unsplash.com/s/photos/dark-animal?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></p>
  </footer>
</div>

:root {
  --primary: #a1d790;
  --global-black: #221b18;
  
  --heading-size: 90px;
}

html,
body {
  height: 100%;
  width: 100%;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
}

.page-container {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  background-image: url("https://assets.codepen.io/2447243/hannah-troupe-0FQneB1VjaM-unsplash.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

header {
  padding: 30px;
}

h1 {
  text-transform: uppercase;
  font-size: var(--heading-size);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: .8;
  color: var(--primary);
}

// mixins
@for $i from 1 through 8 { 
  .heading__outer:nth-last-child(#{$i}) .heading__inner {
    z-index: #{$i};
  }
}
  
.heading__outer {
  display: block;
}

.heading__inner {
  display: inline-block;
  position: relative;
  text-shadow: 
    0 calc(var(--heading-size) / 5) 20px var(--global-black),
    0 calc(var(--heading-size) / 6) 20px var(--global-black);
}

p {
  font-size: 12px;
}

footer {
  padding: 12px;
}

footer, 
footer a {
  color: var(--primary);
}