.view-gallery
  button View Gallery
  
ul
  li.box.box-1
  li.box.box-2
  li.box.box-3
  li.box.box-4
  li.box.box-5
  li.box.box-6

*
  box-sizing: border-box

ul
  list-style: none
  padding: 0
  perspective: 3000px
  max-width: 768px
  margin: auto
  padding: 2rem
  
@media (min-width: 768px)
  ul
    display: grid
    grid-template-columns: repeat(2, 1fr)
    grid-template-rows: repeat(2, 1fr)
    grid-gap: 1rem
  
.box
  width: 100%
  height: 200px
  margin: -3rem 0 0
  transform: translateY(10vh) skew(60deg, -15deg) rotateX(40deg)
  box-shadow: -5px 5px 30px 1px rgba(black, 0.3)
  transition: all 300ms ease
  
.box-1
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/01ZeHnK3F_4_2000px.jpg)
    position: center
    size: cover
    repeat: no-repeat

.box-2
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/0st9yhngses-benjamin-child.jpg)
    position: center
    size: cover
    repeat: no-repeat

.box-3
  background: 
    image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/Great_Wave_off_Kanagawa2_cr.jpg)
    position: center
    size: cover
    repeat: no-repeat

.box-4
  background: 
    image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/bfezchfpm2i-igor-ovsyannykov.jpg)
    position: center
    size: cover
    repeat: no-repeat

.box-5
  background: 
    image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/esawhr5fhn8-oskar-krawczyk.jpg)
    position: center
    size: cover
    repeat: no-repeat

.box-6
  background: 
    image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/joshua-sortino-5581_cr.jpg)
    position: center
    size: cover
    repeat: no-repeat
  
.view-gallery
  text-align: center
  margin: 5vh 0
  
  button
    background: red
    color: white
    padding: 1rem 2rem
    border: 0
    transition: background 200ms ease
    
    &:hover
      cursor: pointer
      background: rgba(red, 0.8)
    
.animated
  transform: translateY(0) skew(0, 0) rotateX(0deg)
  margin: 0 0 1rem
  
@media (min-width: 768px)
  .animated
    margin: 0

$('.view-gallery button').on('click', function() {
  $('.box').toggleClass('animated');
  // $('ul').css({
  //   'max-width' : '100%'
  // });
});