/*sideby quad start*/
.sideby-quadtiles{
	position: relative;
	
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: var(--side-padding);
	padding-top: 100px;
	padding-bottom: 100px;
	gap: var(--gutter);
}

.sideby-quadtiles.sideby-quadtiles--reverse > div:first-child{
	order: 2;
}

.sideby-quadtiles__primary{
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--charcoal);
	border-radius: var(--tile-radius);
	height: 100%;
	justify-content: center;
	padding: var(--tile-padding);
}


.sideby-quadtiles__tile--wrapper{
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gutter);
}

.sideby-quadtiles__tile--wrapper.tile-count-4{
	grid-template-columns: repeat(2, 1fr);
}

.sideby-quadtiles__tile{
	background-size: cover;
	text-align: center;
	justify-content: center;
	display: flex;
	vertical-align: center;
	border-radius: var(--tile-radius);
	aspect-ratio: 1;
	overflow: hidden;
	position: relative;
	max-width: 100%;
}

.sideby-quadtiles__tile--content{
	padding: var(--tile-padding);
	justify-content: center;
	display: flex;
	vertical-align: center;
	flex-direction: column;
	z-index: 3;
	width: 100%;
}

h3.sideby-quadtiles__tile--header{
	font-family: var(--header-font);
	text-align: center;
	font-size: 36px;
}

.sideby-quadtiles__tile--background{
	display: flex;
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	filter: grayscale(100%);
	background-size: cover;
}

.sideby-quadtiles__tile--overlay{
	display: flex;
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	border-radius: var(--tile-radius);
}

@media(width > 1920px){
	.sideby-quadtiles{
		max-width: 1650px;
		margin-inline: auto;
		padding-inline: 0;
	}
}

@media(max-width: 1250px){
	.sideby-quadtiles{
		display: flex;
		flex-direction: column;
	}

	.sideby-quadtiles--reverse{
		flex-direction: column-reverse;
	}
	
	.sideby-quadtiles__tile--wrapper.tile-count-4{
		grid-template-columns: repeat(4, 1fr);
	}
	
	.sideby-quadtiles__primary > *{
		max-width: 80%;
	}
}

@media(max-width: 1050px){
	.sideby-quadtiles{
		padding: 50px;
	}
	
	.sideby-quadtiles__primary > *{
		max-width: 90%;
	}
	
	.sideby-quadtiles__tile--wrapper.tile-count-4{
		grid-template-columns: repeat(2, 1fr);
	}
	
	.sideby-quadtiles__tile{
		aspect-ratio: 2 / 1.5;
	}
}

@media(max-width: 768px){
	.sideby-quadtiles{
		padding: 0;
		padding-bottom: 50px;
		gap: 30px;
	}
	
	.sideby-quadtiles__primary > *{
		max-width: 100%;
	}
	
	.sideby-quadtiles__tile{
		aspect-ratio: 1;
	}
	
		.sideby-quadtiles__primary{
		border-radius: 0;
		padding-inline: var(--site-padding);
		padding-top: 50px;
	}
	
	.sideby-quadtiles__tile--wrapper{
		padding-inline: var(--site-padding);
	}
	
		.tall-flexible .sideby-quadtiles.mobile-light .sideby-quadtiles__primary{
		background-color: transparent;
	}
			
		.sideby-quadtiles.mobile-light .sideby-quadtiles__primary{
		background-color: var(--off-white);
		
		& h2.sideby-quadtiles__primary--header, .sideby-quadtiles__primary--body{
			color: black;
		}
	}
}

@media(480px < width < 768px){
	h3.sideby-quadtiles__tile--header{
		font-size: 28px;
	}
}

@media(max-width: 480px){
	.sideby-quadtiles__tile--wrapper{
		display: flex;
		flex-direction: column;
	}
}

/*sideby quad end*/