/* Misc Styles */
.customContainer{
	width: clamp( 320px , 100% , 1024px );
	padding: 0 15px;
	margin: 0 auto;
}

.grayBG {
	background-color: #333;
	padding: 50px;
}

.grayBG * {
	box-sizing: border-box;
}

.thumb {
	padding: 4px;
	border: #ddd solid 1px;
	background-color: #fff;
}

/* Grids */
.grid {
	display: grid;
	grid-gap: 20px;
}

.col2 {
	grid-template-columns: repeat(2, 1fr);
}

.col3 {
	grid-template-columns: repeat(3, 1fr);
}

.col4 {
	grid-template-columns: repeat(4, 1fr);
}

.span2 {
	grid-column-start: span 2;
}

.span3 {
	grid-column-start: span 3;
}

.span4 {
	grid-column-start: span 4;
}


/* Video Item */
.videoItem {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.videoItem iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.videoItem ~ h3 {
	margin: 5px 5px 0;
}

/* Responsive Styles */
@media (max-width: 1199px) {/* md and down */

	/* Grid */
	.col4{
		grid-template-columns: repeat(3,1fr)
	}

	.span3 {
		grid-column-start: span 2;
	}

	.span4 {
		grid-column-start: span 3;
	}
}

@media (max-width: 991px) {/* sm and down */
	/*Grid*/
	.col3, .col4{
	grid-template-columns: repeat(2,1fr)
	}
	
	.span3,.span4 {
		grid-column-start: span 2;
	}

}

@media (max-width: 767px) {/* xs and down */

	/* Grid */
	.col2, .col3, .col4{
		grid-template-columns: repeat(1,1fr)
	}
	
	.span2, .span3, .span4 {
		grid-column-start: span 1;
	}
}