<div class="fs-grid">
	<div class="fs-row media_gallery">
		<div class="fs-cell-centered fs-lg-9 fs-xl-8">
			<div class="media_large js-carousel_large">
				<a href="//spacehold.it/1600x900/1.jpg" class="js-lightbox" data-lightbox-gallery="media_gallery" title="Caption text 1">
					<img src="//spacehold.it/800x450/1.jpg" alt="">
				</a>
				<a href="//spacehold.it/1600x900/2.jpg" class="js-lightbox" data-lightbox-gallery="media_gallery" title="Caption text 2">
					<img src="//spacehold.it/800x450/2.jpg" alt="">
				</a>
				<a href="//spacehold.it/1600x900/3.jpg" class="js-lightbox" data-lightbox-gallery="media_gallery" title="Caption text 3">
					<img src="//spacehold.it/800x450/3.jpg" alt="">
				</a>
				<a href="//spacehold.it/1600x900/4.jpg" class="js-lightbox" data-lightbox-gallery="media_gallery" title="Caption text 4">
					<img src="//spacehold.it/800x450/4.jpg" alt="">
				</a>
				<a href="//spacehold.it/1600x900/5.jpg" class="js-lightbox" data-lightbox-gallery="media_gallery" title="Caption text 5">
					<img src="//spacehold.it/800x450/5.jpg" alt="">
				</a>
				<a href="//spacehold.it/1600x900/6.jpg" class="js-lightbox" data-lightbox-gallery="media_gallery" title="Caption text 6">
					<img src="//spacehold.it/800x450/6.jpg" alt="">
				</a>
				<a href="//spacehold.it/1600x900/7.jpg" class="js-lightbox" data-lightbox-gallery="media_gallery" title="Caption text 7">
					<img src="//spacehold.it/800x450/7.jpg" alt="">
				</a>
				<a href="//spacehold.it/1600x900/8.jpg" class="js-lightbox" data-lightbox-gallery="media_gallery" title="Caption text 8">
					<img src="//spacehold.it/800x450/8.jpg" alt="">
				</a>
				<a href="//spacehold.it/1600x900/9.jpg" class="js-lightbox" data-lightbox-gallery="media_gallery" title="Caption text 8">
					<img src="//spacehold.it/800x450/9.jpg" alt="">
				</a>
				<a href="//spacehold.it/1600x900/10.jpg" class="js-lightbox" data-lightbox-gallery="media_gallery" title="Caption text 8">
					<img src="//spacehold.it/800x450/10.jpg" alt="">
				</a>
			</div>
			<div class="media_small js-carousel_small" data-carousel-controller-for=".js-carousel_large">
				<div class="media_gallery_thumbnail">
					<img src="//spacehold.it/125x125/1.jpg" alt="">
				</div>
				<div class="media_gallery_thumbnail">
					<img src="//spacehold.it/125x125/2.jpg" alt="">
				</div>
				<div class="media_gallery_thumbnail">
					<img src="//spacehold.it/125x125/3.jpg" alt="">
				</div>
				<div class="media_gallery_thumbnail">
					<img src="//spacehold.it/125x125/4.jpg" alt="">
				</div>
				<div class="media_gallery_thumbnail">
					<img src="//spacehold.it/125x125/5.jpg" alt="">
				</div>
				<div class="media_gallery_thumbnail">
					<img src="//spacehold.it/125x125/6.jpg" alt="">
				</div>
				<div class="media_gallery_thumbnail">
					<img src="//spacehold.it/125x125/7.jpg" alt="">
				</div>
				<div class="media_gallery_thumbnail">
					<img src="//spacehold.it/125x125/8.jpg" alt="">
				</div>
				<div class="media_gallery_thumbnail">
					<img src="//spacehold.it/125x125/9.jpg" alt="">
				</div>
				<div class="media_gallery_thumbnail">
					<img src="//spacehold.it/125x125/10.jpg" alt="">
				</div>
			</div>
		</div>
	</div>
</div>

.media_gallery {
		margin-top: 30px;
		margin-bottom: 30px;
		
		img {
			display: block;
			width: 100%;
		} 
	}
		
	.media_large {
		
		a {
			display: block;
			margin: 0 0 2.5%;
			text-decoration: none;
		}
		
		&.fs-carousel-enabled {
			margin-bottom: 10px; 
		
			.fs-carousel-item {
				position: relative;
			
				margin: 0 10px 0 0;
		
				&:after {
					width: 100%;
				
					background: #263238;
					color: #fff;
					content: attr(title);
					display: block;
					padding: 20px;
			
					@media screen and (min-width: 740px) {
						position: absolute;
						bottom: 0;
						left: 0;
					
						background: fade(#263238, 90);
						color: transparent;
						transition: 
							color 0.25s linear 0s,
							transform 0.25s ease 0s;
						transform: translateY(100%);
					}
				}	
				
				&.fs-carousel-visible {
		
					&:after {
						color: #fff;
						transform: translateY(0);
						transition-delay: 0.35s;
					}
				}
			}
		}
	}
		
	.media_small {
		
		&.fs-carousel-enabled {
		
			.fs-carousel-item {
				position: relative;
			
				cursor: pointer;
				margin: 0 10px 0 0;
		
				&:after {
					height: 100%;
					width: 100%;
					
					position: absolute;
					top: 0;
					left: 0;
				
					background: fade(#00bcd4, 50);
					border: 0 solid #00bcd4;
					content: '';
					opacity: 0;
					transition: 
						border 0.25s linear,
						opacity 0.25s linear;
				}
				
				&.fs-carousel-active {
			
					&:after {
						border-width: 5px;
						opacity: 1;
					}
				}
			}
		}
	}

$(document).ready(function() {
  
  $(".js-carousel_large").carousel({
    pagination: false,
    autoHeight: true
  });
  
  $(".js-carousel_small").carousel({
    show: {
      "0px": 4,
      "500px": 6,
      "980px": 8
    },
    controls: false,
    pagination: false
  });
  
  $(".js-lightbox").lightbox({
    mobile: true
  });
  
});