/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL widgets in the Side-by-Side family. This enables the ability to
	a family of widgets in a single update without touching the structure of the widget and without needing
	to duplicate efforts across several widget-specific CSS files.
*/

.core-side-by-side {
	padding-top: unset;
	margin-bottom: var(--space-20);
}

.core-side-by-side .slide .content-section {
	background-color: #111111;
}

.core-side-by-side .slide .slide-title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-3xl);
	line-height: 1.13em;
	color: var(--white);
}

.core-side-by-side .slide .slide-subtitle {
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.76em;
	color: var(--white);
}

.core-side-by-side .slide p {
	font-size: var(--text-base);
	line-height: 1.8125em;
	letter-spacing: -0.02em;
	color: var(--white);
	font-weight: 500;
}

.core-side-by-side .slide .slide-footer .read-more {
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.core-side-by-side .slide .slide-footer .read-more::after {
	content: "\f105";
	display: inline-flex;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: var(--text-lg);
	transform: translateY(2px);
}

@media (min-width: 66em) {
	.core-side-by-side .slide .slide-title {
		font-size: var(--text-5xl);
		line-height: 0.916em;
		letter-spacing: 0.03em;
	}
}

@media (min-width: 90em) {
	.core-side-by-side .slide .slide-subtitle {
		font-size: 1.375rem;
		line-height: 1.636em;
	}
	
	.core-side-by-side .slide .content-section p {
		font-size: 1.1875rem;
		line-height: 1.526em;
	}
	
	.core-side-by-side .slide .slide-footer .read-more {
		font-size: 19px;
		line-height: var(--leading-snug);
	}
	
	.core-side-by-side .slide .slide-footer .read-more::after {
		font-size: 1.375rem;
		transform: translateY(2.5px);
	}
}