- var n = 0;
  .wrapper
    .item.item-featured
      .content
        a(href="#")
          h2 Lorem ipsum dolor sit amet
          a(href="#") Read more
    while n < 16
      .item
        a(href="#").image-wrapper
          img(src="https://unsplash.it/600/250/?image=2" + n)
        .content
          a(href="#")
            h3.title Lorem ipsum dolor
          p Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nostrud exercitation ullamco laboris aliquip.
          a(href="#") Read more
      - n++

$gap: calc(1em + 1.5vmin);
$min-item-width: 25ch;

$vp-small:  580px;
$vp-medium: 780px;
$vp-large:  1280px;
$vp-huge:   1980px;

body {
  font-size: 14px;
  font-family: "Roboto";
  font-weight: 300;
  line-height: 1.45;
  background: #fefcf9;
}

h1, h2, h3 {
  color: #46413a;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.25em;
}
h2 {
  color: #FFF;
  font-size: 1.75em;
}
h3 {
  font-size: 1.25em;
}
p {
  color: #70685d;
  margin-bottom: 0.5em;
}
a {
  color: #e4af5f;
  text-decoration: none;
}

.wrapper {
  display: grid;
  grid-gap: $gap;
  padding: $gap;
  grid-auto-rows: minmax(25vh, auto);
  grid-template-columns: 1fr;
  @media (min-width: $vp-small) {
    grid-template-columns: repeat(2, minmax($min-item-width, 1fr));
  }
  @media (min-width: $vp-medium) {
    grid-template-columns: repeat(3, minmax($min-item-width, 1fr));
  }
  @media (min-width: $vp-large) {
    grid-template-columns: repeat(4, minmax($min-item-width, 1fr));
  }
}

.item {
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: all 100ms ease;
  &:hover {
    transform: translatey(-1px);
    box-shadow: 0 3px 7px rgba(0,0,0,0.15);
  }
  .image-wrapper {
    img {
      width: 100%;
      object-fit: cover;
      height: 7.75em;
      @media (min-height: 680px) {
        height: 9.25em;
      }
      @media (min-height: 980px) {
        height: 12.5em;
      }   
    }
  }

  .content {
    padding: 1em;
  }
  &.item-featured {
    background-image: linear-gradient(rgba(0,0,0,0) 33%, rgba(0,0,0,.9) 100%), url("https://unsplash.it/1080/750/?image=155");
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column-reverse;
    @media (min-width: $vp-small) {
      font-size: 1.25em;
      grid-column: 1 / span 2;
      grid-row: 1 / span 1;
    }
    @media (min-width: $vp-medium) {
      font-size: 1.5em;
    }
    @media (min-width: $vp-large) {
      font-size: 2em;
      grid-column: 1 / span 3;
      grid-row: 1 / span 2;
    }
    @media (min-width: $vp-huge) {
      grid-column: 1 / span 2;
      grid-row: 1 / span 2;
    }
  }
}