main:not(#gallery) { 
  display: block;
  width: 100%; height: auto;
  max-width: 20rem; margin: auto;
  box-sizing: border-box;
}
#gallery { background-color: transparent; }

/* mulitple-photo images share same height */
figure {margin: 0 0 1rem; padding: 0;}
img {max-height: 12rem; height: 100%; width: auto;}

/* rescale single-photo images to maximum heigh possible w/o overflow */
main>figure>img {
  all:unset;
  max-width: 100%; max-height: 100%;
  width: 100%; height: auto;
  display: inline-block;
}
/* single-photo images and their captions will always stick together */
main:not(#gallery)>figure { break-inside: avoid;}


/* Tablet screen- 2 columns of art */
@media (min-width: 30rem) {
  main:not(#gallery) {columns:2; max-width: 40rem; }
  #gallery>figure>img { max-height: 12rem; max-width: 40%; width: auto;}
}

/* Laptop screen - 3 columns of art */
@media (min-width: 50rem) {
  main:not(#gallery) {columns:3; max-width: 100%; padding: 0 2rem;}
}