:root{
	--gutter : 15px;
}

 .f-grid-item{
	position: relative;
	aspect-ratio: 1.31;
	width: 100%;
	background-color: var(--violet-primary);
	margin: calc(var(--gutter) / 2) 0;
	transition: all 0.2s  ease-in-out;
}

.f-grid-item:hover{
	opacity: 0.8 ;
	transition: all 0.2s  ease-in-out;
}

@media screen and (min-width: 992px) {
	.f-grid-item{
	   width: calc((100% / 3) - var(--gutter));
	   margin:calc(var(--gutter) / 2);
   }
}


.f-grid-item a{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.f-grid-img-container{
	height: 100%;
	width: 100%;
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.f-grid-text{
	width: 100%;
	text-align: left;
	padding: 12px 16px 8px;
	position: absolute;
	top: 0;
	color: #FFF;
	font-size: 24px;
	background-color: var(--violet-primary);
}