Various CSS

box-borders.css

/*
  CSS Box Borders

  Borders will thicken the interior of containers by default. This means, in a case where there are more than one column next to each other, the containers meet will be double thickness. You can make them single thickness by removing the right border on all neighboring containers except the last one with `:not(:last-child)`.
*/

.col {
  border: solid 5px red;
}
.col:not(:last-child) {
  border-right: none;
}

flex-images.css

/*
  Flexbox Images
  --------------
  Images in a flexbox container will, by default, stretch to fill the container. This is due to flexbox's align-self value on items of 'stretch' by default. Changing this value to something else prevents the image from stretching.
*/
.col {
  display: flex;
  flex-direction: column;
}
.col img {
  align-self: center;
  max-width: 100%;
}
@media (min-width: 500px) {
  .col {
    width: 33.332%;
  }
}