/* Paintings and Drawings follow the document order across each row. */
#paintings .masonry,
#drawings .masonry {
  columns: auto;
  column-gap: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 64px 2.4vw;
}

#paintings .portfolio-item,
#drawings .portfolio-item {
  break-inside: auto;
  width: 100%;
  margin: 0;
  display: block;
}

@media (max-width: 900px) {
  #paintings .masonry,
  #drawings .masonry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 58px 28px;
  }
}

@media (max-width: 640px) {
  #paintings .masonry,
  #drawings .masonry {
    grid-template-columns: 1fr;
    gap: 55px;
  }
}