<header class="img-filter">
  <h1>Adventure is Out There</h1>
  <img src='https://images.unsplash.com/photo-1581468903446-84f1398dce17?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1440&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt="mountain range landscape">
  <span class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path fill="none" d="M0 0h24v24H0z" />
      <path d="M15.5 5H11l5 7-5 7h4.5l5-7z" />
      <path d="M8.5 5H4l5 7-5 7h4.5l5-7z" />
    </svg>
  </span>
</header>
<main>
  <ul>
    <li>
      Redwood National Park
      <span class="img-filter"><img src='https://images.unsplash.com/photo-1575679451818-e2a206977134?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='Towering redwoods overhead'></span>
    </li>
    <li>
      Grand Teton National Park
      <span class="img-filter"><img src='https://images.unsplash.com/photo-1504123268864-eab972ee65f9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='The Tetons rising above a lake'></span>
    </li>
    <li>
      Yellowstone National Park
      <span class="img-filter"><img src='https://images.unsplash.com/photo-1501641466388-c67e34ec767e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='Old Faithful geyser spouting'></span>
    </li>
    <li>
      Joshua Tree National Park
      <span class="img-filter"><img src='https://images.unsplash.com/photo-1588562049637-3d88159c14b1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='A lone Joshua tree against a starry sky'></span>
    </li>
  </ul>
</main>

// Read this episode on ModernCSS.dev
// @link https://moderncss.dev/expanded-use-of-box-shadow-and-border-radius/

$shadow-inset: inset 0 0 4vmin 3vmin rgba(black, 0.4);

$shadow-base: 0.06em 0.06em rgba(red, 0.7), 0.09em 0.09em rgba(blue, 0.6);

$shadow-hover: 0.06em 0.06em rgba(red, 0.7), 0.09em 0.09em rgba(orange, 0.7),
  0.15em 0.15em rgba(blue, 0.6);

* {
  box-sizing: border-box;
}

.img-filter {
  box-shadow: $shadow-inset;
  // `background-color` is applied below `box-shadow` in CSS stacking order
  // This means it will not obscure the `box-shadow` even with no alpha transparency
  // Try `red` or `orange` for even more extra vintage flair!
  background-color: rgba(green, 0.35);

  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: relative;
  }
}

header {
  display: grid;
  grid-template-areas: "header";
  place-items: center;
  color: #fff;
  min-height: 60vh;

  > * {
    grid-area: header;
  }

  h1 {
    text-align: center;
    font-size: 6rem;
    font-size: unquote("min(max(3rem, 6vw), 12rem)");
    letter-spacing: 0.03em;
    padding: 5vmin;
    text-shadow: $shadow-base;
    transition: 180ms text-shadow ease-in-out;
  }

  img {
    min-height: 200px;
  }

  .icon {
    color: #fff;
    display: inline-flex;
    align-self: end;
    font-size: 8vmax;
    transform: translateY(50%);

    svg {
      width: 1em;
      height: 1em;
      fill: currentcolor;

      // needed to adjust chosen icon orientation
      transform: rotate(90deg);
    }
  }

  &:hover h1 {
    text-shadow: $shadow-hover;
  }
}

main {
  display: grid;
  justify-content: center;

  ul {
    list-style: none;
    margin: 10vh 0;
    padding: 0;

    li {
      display: grid;
      grid-gap: 2rem;
      align-items: center;
      justify-items: center;
      padding: 1rem;
      font-size: 2rem;
      text-align: center;
      color: #fff;

      @media (min-width: 80ch) {
        grid-auto-flow: column;

        &:nth-of-type(even) span {
          grid-column: 1;
          border-radius: 66% 46% 50% 51% / 43% 58% 75% 59%;
        }
      }

      span {
        // Upsizes inherited box-shadow from `.img-filter`
        font-size: 6rem;
        width: 25vmax;
        height: 25vmax;
        // Ensures img with `object-fit` uses contained dimensions for size
        overflow: hidden;
        border-radius: 47% 49% 40% 51% / 30% 32% 75% 38%;
        transition: 300ms all ease-in-out;
      }

      & + li {
        margin-top: 2rem;
      }

      &:hover span {
        box-shadow: inset 0 0 0 0 rgba(black, 0.4), #{$shadow-hover};
      }
    }
  }
}

body {
  min-height: 100vh;
  background-color: #0f2d0b;
  font-family: "Fugaz One", sans-serif;
}