div#zoom {font-size: 0; width: 100%}
 
.zoommargin1 {padding: 15px 0px 0px 20px}
 
.zoommargin2 {padding: 0px 20px 15px 0px}

div#zoom figure {margin: 8px; width: 45%; 
  height: auto; transition: 0.8s; 
  display: inline-block; position: relative; overflow: hidden; 
   box-shadow: 0 0 10px rgba(0,0,0,0.6)}
   
div#zoom figure:hover { cursor: pointer; z-index: 5; }
div#zoom figure img { width: 100%; height: auto; }
div#zoom figure:nth-child(1) {transform-origin: top left; }
div#zoom figure:nth-child(2) {transform-origin: top right; }
div#zoom figure:nth-child(3) {transform-origin: bottom left; }
div#zoom figure:nth-child(4) {transform-origin: bottom right; }

.expanded { transform: scale(2); z-index: 6; margin: 0px !important; width: 49% !important}

@media (max-width: 600px) {
div#zoom figure {margin: 5px; width: 45%; }   
div#zoom {padding: 0px 0px 15px 5px !important; }  
                   
 }