body { font-family: sans-serif; color: teal; }
h2 { position: absolute; left: 1em; top: 12em; writing-mode: vertical-rl; background-color: white; }
h2>span { font-variant: small-caps; }
div>a { border: 1px solid gray; box-shadow: -2px -2px 4px gray; }
div>a>img { width: 20em; border: 1ex solid white; }
div>a:hover { z-index: 1; }

div
  {
  display: grid; grid-template-columns: repeat(5, 20em); grid-template-rows: 10em;
  grid-auto-flow: row dense; grid-auto-rows: 10em;
  justify-content: center; align-items: end; justify-items: center;
  margin: 15em 4em 15em 4em; /* enough to accomodate transforms */ 
  border: 1ex solid teal; border-radius: 2em; 
  background-image: url("../images/bckgrdMesh.svg"); background-size: 50px ;
  }

/* crate "randomness" for the photos */
div>a:nth-of-type(2n) { transform: rotate(5deg); }
div>a:nth-of-type(2n+1) { transform: translateY(1em) rotate(-9deg); }
div>a:nth-of-type(2n+5) { transform: translate(-2em,-1em) rotate(-6deg); grid-row-end: span 2; }
div>a:nth-of-type(2n+9) { transform: translateX(1em) rotate(-6deg); }