#fields {}
#fields > .content-wrapper {}

/*--------------------------------------------------------------------------------*/

#fields > .content-wrapper > .grid {
	margin-bottom: 50px;
	
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#fields > .content-wrapper > .grid > .field {
	position: relative;
	overflow: hidden;
    
    isolation: isolate;
}
#fields > .content-wrapper > .grid > .field:before {
	content: '';
	display: block;
	padding-top: 115%;
}
#fields > .content-wrapper > .grid > .field > .background {
    position: absolute; top: 0; left: 0; z-index: -1;
	height: 100%; width: 100%;
    
    isolation: isolate;
}
#fields > .content-wrapper > .grid > .field > .background > img,
#fields > .content-wrapper > .grid > .field > .background > video {
    display: block; height: 100%; width: 100%;
	
    object-fit: cover;
    object-position: center;
    
    pointer-events: none;
}
#fields > .content-wrapper > .grid > .field > .background:after {
	content: '';
	position: absolute; top: 0; left: 0;
	height: 100%; width: 100%;
	
	background-color: #000;
	
	opacity: .3;
}
#fields > .content-wrapper > .grid > .field > .container {
	position: absolute; top: 25px; left: 25px;
	display: flex; height: calc(100% - 50px); width: calc(100% - 50px);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	text-align: center;
	color: #FFF;
}
#fields > .content-wrapper > .grid > .field > .container > .title { font-family: 'Stretch Pro'; }

@media (min-width: 900px) {
	#fields > .content-wrapper > .grid { column-gap: 30px; }
	#fields > .content-wrapper > .grid > .field {
		flex: 0 0 calc((100% - 90px) / 4);
		border-radius: 30px;
	}
	#fields > .content-wrapper > .grid > .field:not(:nth-child(-n + 4)) { margin-top: 50px; }
	#fields > .content-wrapper > .grid > .field > .container > .title { font-size: 16px; }
}
@media (max-width: 899.99px) {
	#fields > .content-wrapper > .grid { column-gap: 25px; }
	#fields > .content-wrapper > .grid > .field {
		flex: 0 0 calc((100% - 25px) / 2);
		border-radius: 20px;
	}
	#fields > .content-wrapper > .grid > .field:not(:nth-child(-n + 2)) { margin-top: 25px; }
	#fields > .content-wrapper > .grid > .field > .container > .title { font-size: 14px; }
}