/* Specific style pertaining to this block only, to be used whenever your block is displayed both front-end and back-end */

.two-column-tiles {
	padding: 4rem 0;
	position: relative;
}
.two-column-tiles.light-gray {
	background-color: #f7f7f7;
}
.two-column-tiles .byrdadatto-two-column-tiles-watermark {
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../../../assets/images/BA_BackgroundWatermark.png);
	/* mix-blend-mode: color-dodge; */
	background-size: clamp(320px,65vw,700px);
}
.two-column-tiles-container {
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.two-column-tiles .two-column-tiles-container > * + * {
	margin-top: 4rem;
}

.two-column-tiles .two-column-tiles-heading,
.two-column-tiles .two-column-tiles-cards {
	width: 100%;
}



/* heading */
.two-column-tiles .two-column-tiles-heading {
	margin: 0 auto;
	display: flex;
	flex-direction: row;
}
.two-column-tiles .two-column-tiles-heading > * + * {
	margin-left: auto;
}
.two-column-tiles .two-column-tiles-heading-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-right: 1rem;
	text-align: center;
	width: 100%;
}
.two-column-tiles .two-column-tiles-heading-content:last-of-type {
	margin-right: 0;
}



/* cards */

.two-column-tiles .two-column-tiles-cards {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	--card-border-width: 1px;
}
.two-column-tiles .two-column-tiles-cards-inner {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	width: calc(100% + (2 * var(--padding)));
	margin-top: calc(-1 * var(--card-border-width));
	margin-bottom: calc(-1 * var(--card-border-width));
}

.two-column-tiles .two-column-tiles-card {
	width: 50%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: var(--padding);
	border: var(--card-border-width) solid var(--color-200);
}
.two-column-tiles-card .tile-card-image {
	max-width: 200px;
	width: 33%;
}
.image-left-heading .title-card-heading {
	display: flex;
	margin-bottom: var(--padding);
}
.title-card-heading > .tile-card-image {
	width: 14%;
	min-width: 3.5rem;
	margin: 0 var(--padding) 0 0;
}
.title-card-heading h3 {
	width: 100%;
}
.two-column-tiles-card .tile-card-copy {
	width: 100%;
}

.two-column-tiles .two-column-tiles-card > * + * {
	margin-top: 1rem;
}

@media only screen and (max-width: 64em) {
	.two-column-tiles {
		background-color: var(--color-150);
	}
	.two-column-tiles .byrdadatto-story-watermark {
		display: none;
	}
	.image-left-heading .title-card-heading,
	.two-column-tiles .two-column-tiles-cards-inner {
		flex-direction: column;
		text-align: center;
	}
	.two-column-tiles .two-column-tiles-card {
		width: 100%;
		padding: var(--padding) var(--padding) calc(1.5 * var(--padding));
	}
	.title-card-heading > .tile-card-image {
		margin: 0 auto calc(0.5 * var(--padding));
		max-width: 75px !important;
	}
	.title-card-heading > .tile-card-content {
		text-align: center;
	}

}