/* Grid */

.grid-section {
	display: grid;
	grid-template-columns: repeat(var(--columns), 1fr); 
	grid-gap: calc(var(--grid-gap) * 1px);
    margin-bottom: calc(var(--grid-gap) * 1px);
	padding-bottom: 0px;
	overflow: visible;
}

.container:nth-child(1) .grid-section {
	margin-top:50px !important;
}


.grid-section[data-grid="grid13"] {
	grid-template-columns: 1fr 2fr; 
}

.grid-section[data-grid="grid23"] {
	grid-template-columns: 2fr 1fr; 
}


.grid-item {
	background-size: cover;
	background-position: center;
	text-align: center;
	color: #fff; 
	height: auto;
	aspect-ratio: 16 / 9;
}

.grid-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.0);
	transition: all 0.8s;
	box-sizing: border-box;
	padding: 100px;
}

.grid-content h3 {
	color: #FFF !important;
}
.grid-content p {
	font-size: 20px;
	color: #FFF;
}

.grid-content {
	font-size: 5vh;
}
.grid-content small {
	font-size: 2vh;
}

.grid-item .grid-content {
	background-color: rgba(0, 0, 0, 0.6);
}

.grid-item:hover .grid-content {
	background-color: rgba(0, 0, 0, 0.2);
}

.grid-content .button {
	margin-top:20px;
}


.grid-section[data-layout="left-bottom"] .grid-item .grid-content {
	justify-content: flex-end;
	align-items: flex-start; 
	padding: 30px;
}

.grid-section[data-layout="right-bottom"] .grid-item .grid-content {
	justify-content: flex-end;
	align-items: flex-end; 
	padding: 30px;
}

.grid-section[data-layout="center-top"] .grid-item .grid-content {
	justify-content: flex-start;
	align-items: center; 
	padding: 30px;
}

.grid-section[data-layout="center-bottom"] .grid-item .grid-content {
	justify-content: flex-end;
	align-items: center; 
	padding: 30px;
}

@media only screen and (max-width: 767px) {
	.grid-section,
	.grid-section[data-grid="grid13"],
	.grid-section[data-grid="grid23"] {
		grid-template-columns: repeat(1, 1fr); 
	}	
	
	.grid-content {
		padding:20px;
	}
	
	.grid-section {
	display: grid;
	grid-template-columns: repeat(1, 1fr); 
	grid-gap: calc(var(--grid-gap) * 1px);
    margin-bottom: calc(var(--grid-gap) * 1px);
	padding-bottom: 0px;
	overflow: visible;
}
	
}


.shadow {
	box-shadow: 0px 4px 40px 15px rgba(0, 0, 0, 0.15);
}
.shadow:hover {
	box-shadow: 0px 4px 40px 15px rgba(0, 0, 0, 0.35);
}