/* The following CSS taken from http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/ */
/* with some changes */
/* Used on Landscape pages from 08.08.15 */

ul {
  width: 100%;
  padding: 0;
  margin: 0 0 2em 0;
  list-style-type: none;
}

li {
  float: left;
  width: 50%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

li a {
  display: block;
  width: 100%;
  position: relative;
  height: 0;
  padding: 100% 0 0 0;
  overflow: hidden;
}

img {
  position: absolute;
  display: block;
  max-width: 95%;
  max-height: 95%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}