@charset "UTF-8";

#link-grid3 a {
	background-repeat: no-repeat;
	background-position: center;
    webkit-transition: background-size 500ms linear;
    -moz-transition: background-size 500 linear;
    -o-transition: background-size 500 linear;
    -ms-transition: background-size 500ms linear;
    transition: background-size 500ms linear;
}

#link-grid3 a:focus,
#link-grid3 a:hover,
#link-grid3 a:active {
	text-decoration: none;
}
 
#link-grid3 a > div {
	padding: 20%;
}

#link-grid3 h2 {
	display: inline-block;
	padding: .25rem .5rem;
	margin: 0 auto;
	background: linear-gradient(to right, var(--yellow) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: right bottom;
	transition: all .5s ease;
}

#link-grid3 a:focus h2,
#link-grid3 a:hover h2,
#link-grid3 a:active h2 {
	background-position: left bottom;
	color: var(--black);
}


/* XS */
@media only screen and (min-width : 0px) {
	
	#link-grid3 a,	
	#link-grid3 a:focus,
	#link-grid3 a:hover,
	#link-grid3 a:active {
		background-size: cover;
	}

}

/* SM (landscape phones, 576px and up) */
@media (min-width: 576px) { 
	
}

/* MD (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* LG (desktops, 992px and up) */
@media (min-width: 992px) {
	
}

/* XL (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	
	#link-grid3 a {
		background-size: 100%;
	}
	
	#link-grid3 a:focus,
	#link-grid3 a:hover,
	#link-grid3 a:active {
		background-size: 105%;
	}
	
}