#fonts picture {
  display: block;
  overflow: hidden;
}

#fonts li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#fonts li:last-child {
  border-bottom: none;
}

#fonts img {
  display: block;
}

#fonts li > div {
  display: flex;
  justify-content: space-between;
  position: relative;
}

#fonts div h2 {
  display: none;
  font-size: 28px;
  font-family: miller-display;
  font-weight: 400;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 0;
}

#fonts div h2 a {
  text-decoration: none;
}

#fonts ul {
  margin-bottom: 1em;
  padding: 0;
}

/* If you update this, also update the response image media query in index.html */
@media screen and (min-width: 550px) {
  #fonts div h2 {
    display: inline-block;
  }

  picture img {
    width: 100%;
    height: auto;
  }

  #fonts li {
    border-bottom: none;
    margin-bottom: 4em;
  }
}

@media screen and (min-width: 55em) {
  #fonts div h2 {
    font-size: 44px;
  }

  #fonts li {
    margin-bottom: 6em;
  }
}