html {
  font-size: 20px;
  font-family: Georgia, serif, sans-serif;
  line-height: 1.5;
}

.single-column {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
}

li {
  margin-bottom: 0.25em;
}

hr {
  margin: 2em;
}

.cinematography-grid {
  display:  grid;
  grid-template-columns: repeat(3, 1fr);
}

.cinematography-tile {
  background-color:  black;
}

.cinematography-tile * {
  width: 100%; 
  height: 100%;
}

.cinematography-tile a {
  display:  block;
  object-position: center;
}

.cinematography-tile img {
  object-fit: contain;
}

@media (max-width: 720px) {
  .cinematography-grid {
    grid-template-columns: repeat(2, 1fr);
    position: absolute;
    left:  0;
    width: 100vw;
  }
}


@media (min-width: 1440px) {
  .cinematography-grid {
    position: absolute;
    left:  0;
    width: 100vw;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1600px) {
  .cinematography-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}