@charset "UTF-8";

#grid-4 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;
}

#grid-4 a:focus,
#grid-4 a:hover,
#grid-4 a:active {
	text-decoration: none;
}

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

#grid-4 a:focus h2,
#grid-4 a:hover h2,
#grid-4 a:active h2 {
	background-position: left bottom;
}

/* XS */
@media only screen and (min-width : 0px) {

	#grid-4 .grid-element{
		height: 33vh;
	}

	#grid-4 .grid-element h2 {
		font-size: .8rem;
	}

	#grid-4 .grid-element .btn-theme-box {
		display: none;
	}

	#grid-4 a,
	#grid-4 a:focus,
	#grid-4 a:hover,
	#grid-4 a:active {
		background-size: cover;
	}

	#grid-4 a > div {
	    padding: 5% 10%;
	}

	#grid-4 p {
		line-height: 1.5;
	}

}

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

	#grid-4 p {
		line-height: 24px;
	}

}

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

}

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

	#grid-4 .grid-element{
		height: 50vh;
	}

	#grid-4 .grid-element h2 {
		font-size: 2rem;
	}

	#grid-4 .grid-element .btn-theme-box {
		display: inline-block;
	}

}

/* XL (large desktops, 1200px and up) */
@media (min-width: 1200px) {

	#grid-4 a {
		background-size: 100%;
	}

	#grid-4 a:focus,
	#grid-4 a:hover,
	#grid-4 a:active {
		background-size: 105%;
	}

	#grid-4 a > div {
		padding: 10% 20%;
	}

}