Cacher is the code snippet organizer for pro developers

.split-gallery{
  overflow: hidden;
background: rgba(255,255,255,.3);
  
  .sqs-block-content{
    overflow: hidden;
    float: left;
    width: 49%;
    margin-right: 1%;
  }
  .thumb-image{
    opacity: .5 !important;
  }
  .thumb-image:hover{
    opacity: 1 !important;
  }
}

#large-image{
  display: inline-block;
  width: 50%;
  height: 100%;
  float: left;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  
}

@media screen and (max-width: 750px){
  .split-gallery .sqs-block-content{
  	width: 100% !important;
  }
  #large-image{
  	display: none;
  }
}

	$(document).ready(function(){
      
      //ignore the existing gallery 
      if (document.location.pathname == "/the-gallery-home/"){
        $('.sqs-block-gallery[data-block-json]').filter(function() {
          return $(this).data('block-json').design == 'grid';
      	}).eq(1).addClass('split-gallery');
      }else{
       	 $('.sqs-block-gallery[data-block-json]').filter(function() {
          return $(this).data('block-json').design == 'grid';
     	 }).addClass('split-gallery'); 
      }
      
      $(window).on('resize orientationChange', function(event) {
          $('#large-image').height($('.split-gallery .sqs-block-content').height());
      });
      
      $('.split-gallery').append('<div id="large-image"></div>');
      
      var imgUrl = "url(" + $('.split-gallery img').eq(0).attr('data-src') + ")";  
      $('#large-image').css('background', imgUrl);
      
      $('.split-gallery img').hover(function(){
        imgUrl = "url(" + $(this).attr('data-src') + ")";
        $('#large-image').html('');
        $('#large-image').css('background', imgUrl);
      });
      
      $('#large-image').height($('.split-gallery .sqs-block-content').height());
    });