photos { 
  columns: 1; display: block;
  width: 100%; height: auto;
  max-width: 20rem; margin: auto;
  box-sizing: border-box;
}
figure {margin: 0 0 1rem; padding: 0;}
img {max-height: 12rem; }

photos>figure { break-inside: avoid;}
photos>figure>img {
  max-width: 100%; max-height: 100%;
  width: 100%; height: auto;
  display: inline-block;
}

@media (min-width: 30rem) {
  photos {columns:2; max-width: 40rem; }
}

@media (min-width: 50rem) {
  photos {columns:3; max-width: 100%; padding: 0 2rem;}
}