/* resets */

* {
    box-sizing: border-box;
}
html, body, div, img {
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
body {
    line-height: 1.2;
    margin: 1em;
}

/* styles for the gallery layout */

.grid {
  display: flex;
  flex-wrap: wrap;
  padding: 1ex;
}

.item {
  margin: 1ex;
  border: 2px solid blue;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  /* .item needs position relative for the absolute positioning of .icc to
   * work */
  position: relative;
}

.item a img { max-height: 270px;
              max-width: 270px;
              display: block;
              margin-left: auto;
              margin-right: auto;}

.item a h2, .item h3 { max-width: 270px; }

/* expand image to fill the flex box, making the h2/h3 into "footers" */
.item a:first-child { flex-grow: 1; }

.item h2, .item h3 { flex-shrink: 0; }

.icc {
  position: absolute;
  bottom: 0px;
  right: 4px;
}