Video gallery

<link rel="stylesheet" href="https://cdn.rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">

<div class="content">
  
    <div class="section-header">
      <h1>Video Gallery</h1>  
     </div>
    
    <div class="video-gallery">
      
      <div class="gallery-item">
       <img src="https://assets.codepen.io/156905/rainier.jpg" alt="Mount Rainier"/>
        <div class="gallery-item-caption">
          <!--<div>-->
            <h2>Mount Rainier</h2>
            <p>14410 feet of adventure</p>
          <!--</div>-->
          <a class="vimeo-popup" href="https://vimeo.com/179049611"></a>
        </div>
      </div>
  
      <div class="gallery-item">
        <img src="https://assets.codepen.io/156905/olympicnationalpark.jpg" alt="Olympic National Park"/>
        <div class="gallery-item-caption">
          <!--<div>-->
            <h2>Olympic National Park</h2>
            <p>Mountains, rain forests, wild coastlines</p>
          <!--</div>-->
          <a class="vimeo-popup" href="https://vimeo.com/108785446"></a>
        </div>
      </div>
      
      <div class="gallery-item">
       <img src="https://assets.codepen.io/156905/northcascadespark.jpg" class="north-cascades-img" alt="North Cascades National Park"/>
        <div class="gallery-item-caption">
          <!--<div>-->
            <h2>North Cascades</h2>
            <p>The mountains are calling</p>
          <!--</div>-->
          <a class="vimeo-popup" href="https://vimeo.com/3653567"></a>
        </div>
      </div>
  
      <div class="gallery-item">
        <img src="https://assets.codepen.io/156905/mountsthelens.jpg" alt="Mount St Helens"/>
        <div class="gallery-item-caption">
          <!--<div>-->
            <h2>Mount St. Helens</h2>
            <p>The one and only</p>
          <!--</div>-->
          <a class="vimeo-popup" href="https://vimeo.com/171540296"></a>
        </div>
      </div>

    </div>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>

body {
	font-family: "Overpass", sans-serif;
	box-sizing: border-box;
	background-color: #0d89a5;
  }
  
  .section-header {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px; 
	background: #2B3044;
  }
  
  .section-header h1 {
	font: 400 32px "Montserrat", sans-serif;
	text-transform: uppercase;
	color: #fff;
  }
  
  .video-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
	grid-gap: 15px;
	max-width: 1100px;
	padding: 15px; 
	margin: 0 auto;
	box-sizing: border-box;
  }
  
  .video-gallery .gallery-item {
	position: relative;
	width: 100%;
	height: 300px;
	background: #000;
	cursor: pointer;
	overflow: hidden;
  }
  
  .video-gallery .gallery-item img {
	position: relative;
	display: block;
	width: 115%;
	height: 300px;
	object-fit: cover;
	opacity: .5;
	/*transition: opacity .35s, transform .35s;*/
	transition: all 350ms ease-in-out;
	transform: translate3d(-23px, 0, 0);
	/*backface-visibility: hidden;*/
  }
  
  .north-cascades-img {
	object-position: 50% 30%;
  }
  
  .video-gallery .gallery-item .gallery-item-caption {
	padding: 32px;
	font-size: 1em;
	color: #fff;
	text-transform: uppercase;
  }
  
  .video-gallery .gallery-item .gallery-item-caption,
  .video-gallery .gallery-item .gallery-item-caption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  }
  
  .video-gallery .gallery-item h2 {
	font-weight: 300;
	overflow: hidden;
	padding: 12px 0;
  }
  
  .video-gallery .gallery-item h2,
  .video-gallery .gallery-item p {
	position: relative;
	margin: 0;
	z-index: 1;
	pointer-events: none;
  }
  
  .video-gallery .gallery-item p {
	letter-spacing: 1px;
	font-size: 12px;
	padding: 12px 0;
	opacity: 0;
	transition: opacity 0.35s, transform 0.35s;
	transform: translate3d(10%, 0, 0);
  }
  
  .video-gallery .gallery-item:hover img {
	opacity: 0.3;
	transform: translate3d(0, 0, 0);
  }
  
  .video-gallery .gallery-item .gallery-item-caption {
	text-align: left;
  }
  
  .video-gallery .gallery-item h2::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 15%;
	height: 1px;
	background: #fff;
	transition: transform 0.3s;
	transform: translate3d(-100%, 0, 0);
  }
  
  .video-gallery .gallery-item:hover h2::after {
	transform: translate3d(0, 0, 0);
  }
  
  .video-gallery .gallery-item:hover p {
	opacity: 1;
	transform: translate3d(0, 0, 0);
  }
  
  /*
  @media screen and (max-width: 784px) {
	.video-gallery {
	  width: 100%;
	  padding: 15px;    
  
	}
	.video-gallery .gallery-item {
	  width: 95%;
	  margin: 0 auto; 
	  width: 100%;
	}
  }
  */

$(document).ready(function () {
  $(".video-gallery").magnificPopup({
    delegate: "a",
    type: "iframe",
    gallery: {
      enabled: true
    }
  });
});