body {
  margin: 0;
  background-color: #ABB4CD;
}

/* apply a natural box layout model to all elements, but allowing components to change */

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.image-grid {
  width: 100%;
  max-width: 2620px;
  margin: 0 auto;
  overflow: hidden;
  padding: 10px 5px 0;
}

.image__cell {
  float: left;
  position: relative;
}

.image--basic {
  padding: 0 5px;
}

.basic__img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.image__cell.is-collapsed .image--basic {
  cursor: pointer;
}

.image__cell.is-expanded .image--expand {
  max-height: 1000px;
  margin-bottom: 10px;
}

.image--expand {
  position: relative;
  left: -5px;
  padding: 0 5px;
  box-sizing: content-box;
  overflow: hidden;
  background: #141526;
  max-height: 0;
  /*transition: max-height .3s ease-in-out,margin-bottom .1s .2s;*/
}

.image__cell.is-collapsed .arrow--up {
  height: 10px;
  width: 100%;
}

.image__cell.is-expanded .arrow--up {
  border-bottom: 8px solid #222;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  height: 0;
  width: 0;
  margin: 2px auto 0;
}

.expand__close {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #454545;
  font-size: 50px;
  line-height: 50px;
  text-decoration: none;
}

.expand__close:before {
  content: '×';
}

.expand__close:hover {
  color: #fff;
}

.image--large {
  max-width: 100%;
  height: auto;
  display: block;
  padding: 100px;
  margin: 0 auto;
  box-sizing: border-box;
}

@media only screen and (max-width: 800px) {

  .image__cell {
      width: 50%;
  }

  .image__cell:nth-of-type(2n+2) .image--expand {
      margin-left: -100%;
  }

  .image__cell:nth-of-type(2n+3) {
      clear:left;
  }

  .image--expand {
      width: 200%;
  }

}

@media only screen and (min-width: 801px) {
  .image__cell {
      width: 12.5%;
  }
  
  .image__cell:nth-of-type(8n+2) .image--expand {
    margin-left: -100%;
  }

  .image__cell:nth-of-type(8n+3) .image--expand {
    margin-left: -200%;
  }

  .image__cell:nth-of-type(8n+4) .image--expand {
    margin-left: -300%;
  }
  
  .image__cell:nth-of-type(8n+5) .image--expand {
    margin-left: -400%;
  }
  .image__cell:nth-of-type(8n+6) .image--expand {
    margin-left: -500%;
  }
	.image__cell:nth-of-type(8n+7) .image--expand {
    margin-left: -600%;
  }
	.image__cell:nth-of-type(8n+8) .image--expand {
    margin-left: -700%;
  }

  .image__cell:nth-of-type(8n+9) {
    clear: left;
  }
  
  .image--expand {
    width: 800%;
  }
  
}