<div class="wrapper">
  <nav class="lil-nav">
    <a href="#image-1">
      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/kenan-sulayman-FV3M7igu8Fs-unsplash.jpg" alt="Yosemite" />
    </a>
    <a href="#image-2">
      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/anastasia-dulgier-NCFTGtjY3EQ-unsplash.jpg" alt="Houses" />
    </a>
    <a href="#image-3">
      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/arnaud-mariat-IPXcUYHeErc-unsplash.jpg" alt="Galaxies" />
    </a>
    <a href="#image-4">
      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/matthew-smith-9CV6WrxxdrM-unsplash.jpg" alt="Motel" />
    </a>
    <a href="#image-5">
      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/vladimir-kondriianenko-bxwzcFy9YwM-unsplash.jpg" alt="Minimalist nightmare" />
    </a>
    <a href="#image-6">
      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/jakob-owens-EkxOtUljwhs-unsplash.jpg" alt="Hoops" />
    </a>
    <a href="#image-7">
      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/tim-bogdanov-4uojMEdcwI8-unsplash.jpg" alt="Gentleman" />
    </a>
    <a href="#image-8">
      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/weston-mackinnon-caUtk0DTiR0-unsplash.jpg" alt="Stuff" />
    </a>
  </nav>

  <div class="gallery">
    <img class="gallery__img" id="image-1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/kenan-sulayman-FV3M7igu8Fs-unsplash.jpg" alt="Yosemite" />
    <img class="gallery__img" id="image-2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/anastasia-dulgier-NCFTGtjY3EQ-unsplash.jpg" alt="Houses" />
    <img class="gallery__img" id="image-3" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/arnaud-mariat-IPXcUYHeErc-unsplash.jpg" alt="Galaxies" />
    <img class="gallery__img" id="image-4" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/matthew-smith-9CV6WrxxdrM-unsplash.jpg" alt="Motel" />
    <img class="gallery__img" id="image-5" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/vladimir-kondriianenko-bxwzcFy9YwM-unsplash.jpg" alt="Minimalist nightmare" />
    <img class="gallery__img" id="image-6" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/jakob-owens-EkxOtUljwhs-unsplash.jpg" alt="Hoops" />
    <img class="gallery__img" id="image-7" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/tim-bogdanov-4uojMEdcwI8-unsplash.jpg" alt="Gentleman" />
    <img class="gallery__img" id="image-8" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/weston-mackinnon-caUtk0DTiR0-unsplash.jpg" alt="Stuff" />
  </div>
</div>

$large: 1200px;

img {
  display: block;
  max-width: 100%;
}

.wrapper {
  overflow: hidden;
  height: 100vh;
  display: grid;
  grid-template-rows: 2fr 1fr;
  grid-gap: 10px;

  @media screen and (min-width: $large) {
    grid-template-columns: 1fr 5fr;
    grid-template-rows: auto;
  }
}

.gallery {
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  display: flex;

  @media screen and (min-width: $large) {
    display: block;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
  }
}

.gallery__img {
  scroll-snap-align: start;
  margin-bottom: 10px;
  min-width: 100vw;
  object-fit: cover;

  @media screen and (min-width: $large) {
    min-width: auto;
    min-height: 100vh;
  }
}

.lil-nav {
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  grid-row-start: 2;

  @media screen and (min-width: $large) {
    overflow-y: scroll;
    overflow-x: hidden;
    display: block;
    grid-row-start: auto;
  }

  a {
    display: flex;
    min-width: 45vw;
    margin-right: 10px;

    @media screen and (min-width: $large) {
      margin-bottom: 10px;
      min-height: 200px;
      min-width: 100%;
    }
  }
}

.lil-nav__img {
  object-fit: cover;
  filter: saturate(0);
  transition: 0.3s ease all;

  &:hover {
    transform: scale(1.05);
    filter: saturate(1);
  }
}