Cacher is the code snippet organizer for pro developers

.image-gallery{
	margin-top: 40px;
}
.image-gallery-image > div{
	float: left;
	background-position: center center;
	background-size: cover;
	height: 200px;

	width: 33%;
	margin-right: 0.5%;
}
.image-gallery-image.last > div{
	margin-right: 0;
}
@media only screen and (max-width: 959px){
	.image-gallery-image > div{
		width: 100%;
		margin-right: 0;
		margin-bottom: 5px;
	}
}

<div class="image-gallery">
<?php $slides = get_post_meta( get_the_ID(), 'rnr_project_item_slides', false ); ?>
<?php foreach( $slides as $slide_id ) : ?>
	<?php $slide_thumb_parts = wp_get_attachment_image_src( $slide_id, array(200,200) ); ?>
	<?php $slide_large_parts = wp_get_attachment_image_src( $slide_id, 'large' ); ?>
	<?php $slide_thumb_url = $slide_thumb_parts[0]; ?>
	<?php $slide_large_url = $slide_large_parts[0]; ?>
	<a class="image-gallery-image <?php if( $counter == 2 ) echo 'last'; ?>" href="<?php echo $slide_large_url ?>" data-lightbox="single-portfolio-gallery">
		<div style="background-image:url(<?php echo $slide_thumb_url ?>)"></div>
	</a>
<?php $counter = ++$counter % 3; endforeach; ?>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css">