/**
 * images.css
 * 
 * Index
 * 
 * - Global image sizing: makes images no larger than their container, height is set automatically to avoid distortion
 * - Vertical alignment for rows of images which have a different ratio
 * 
 */

/*-----------------------------------------------------------------------
# Global image sizing
------------------------------------------------------------------------*/

img {
  max-width: 100%;
  height: auto;
}

/*-----------------------------------------------------------------------
# Vertical alignment
------------------------------------------------------------------------*/

/* Wrap the image inside class "image-wrap" */
.image-wrap {
  display: block;
  width: 100%;
  position: relative;
  height: 0;
  padding: 75% 0 0 0;
  overflow: hidden;
  background-color: #fff;
}

.image-wrap img {
  position: absolute;
  display: block;
  max-height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}