Combining classes?

.container {
 
display:flex;
 
flex-direction:row;
 
flex-wrap:wrap;
 
align-items:center;
 
justify-content: center;
 
}
 
 
a.gallery {
 
margin:5px;
 
padding:5px;
 
background:#fff;
 
 
border-radius:5%;
 
box-shadow:5px 5px 5px 5px white inset;
 
 
}
 
 
a.gallery:hover {
 
transition:all .3s;
 
transform:scale(1.1);
 
}
 
 
a.gallery img {
 
height:150px;
 
}
 
 
 
a.custom {
 
display:inline-block;
 
padding:5px;
 
color:#fff;
 
background:#000;
 
border:1px solid #fff;
 
box-shadow:0 0 10px rgba(0,0,0,0.2);
 
text-decoration:none;
 
}

<div class="container">
 
<a class="custom gallery" type="video" href="https://youtu.be/vpL7-122WHQ"><img src="images_movie/01.jpg" alt="violin"></a>
<a class="custom gallery" type="video" href="https://youtu.be/D3yqasa34vY"><img src="images_movie/02.jpg" alt="jump"></a>
 
<a class="custom gallery" type="video" href="https://youtu.be/vpL7-122WHQ"><img src="images_movie/03.jpg" alt="wedding"></a>
<a class="custom gallery" type="video" href="https://youtu.be/D3yqasa34vY"><img src="images_movie/04.jpg" alt="Donuts"></a>
 
</div>

.gallery_type {
	list-style:none;
	display:flex;
	flex-direction:row;	
	flex-wrap:wrap;	
	align-items:center;	
	justify-content:center;
	margin:0 auto;
	}
 
.gallery_type {
	max-width:850px;
}
 
.gallery_type li {
	padding:5px;
	text-align:center;
	outline:1px solid #ffffff;
}
 
.gallery_type a {
	display:inline-block;
	vertical-align:bottom;
	padding:10px;
	background:#000;
	border:3px solid #FFF;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	transition:scale 0.3s;
	transform:scale 1.1;	
}
 
.gallery_type img {
	display:block;
	height:180px;
}

<ul class="gallery_type">
	<li>
		<a href="#">
			<img src="images/01.jpg" alt="placeholder">
		</a>
	</li><li>
		<a href="#">
			<img src="images/02.jpg" alt="placeholder">
		</a>
	</li><li>
		<a href="#">
			<img src="images/03.jpg" alt="placeholder">
		</a>
	</li><li>
		<a href="#">
			<img src="images/04.jpg" alt="placeholder">
		</a>
	</li>
</ul>