/*
	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: 0;
}

.core-side-by-side .slide .slide-top,
.core-side-by-side .slide .content-section,
.core-side-by-side .slide .content-section > .inner,
.core-side-by-side .slide .content-section .content-top,
.core-side-by-side .slide .content-section .heading-container {
	display: block;
}

.core-side-by-side .slide .img-cont {
	margin-bottom: 13px;
}

.core-side-by-side .img-credits {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 10;
	display: block;
	padding: var(--space-2);
	background: rgba(255,255,255,.7);
	color: var(--dark-gray);
	font-weight: var(--font-weight-regular);
	font-size: var(--text-xs);
	line-height: var(--leading-none);
	letter-spacing: .02rem;
}

.core-side-by-side .slide .content-section .heading-container {
	margin-bottom: 10px;
}

.core-side-by-side .slide .small-gray-text {
	margin-bottom: var(--space-3);
}

.core-side-by-side .slide .slide-title,
.core-side-by-side .slide p {
	color: var(--dark-gray);
}

.core-side-by-side .slide .slide-title {
	font-weight: var(--font-weight-medium);
	font-size: var(--text-2xl);
	line-height: 1.167;
}

.core-side-by-side .slide .slide-title > a {
	color: inherit !important;
	text-decoration: none !important;
}

.core-side-by-side .slide p {
	font-weight: var(--font-weight-book);
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	letter-spacing: .02rem;
}

@media (min-width: 40em) {
	.core-side-by-side .slide > .inner {
		gap: 30px;
	}
	
	.core-side-by-side .slide .content-section > .inner {
		padding: 0 !important;
	}
}

@media (min-width: 64em) {
	.core-side-by-side .slide .content-section > .inner {
		padding: 20px 0 !important;
	}

	.core-side-by-side .slide .content-section .heading-container {
		margin-bottom: var(--space-5);
	}

	.core-side-by-side .img-credits {
		font-size: .8125rem;
		padding: 10px;
	}

	.core-side-by-side .slide .small-gray-text {
		margin-bottom: 10px;
	}

	.core-side-by-side .slide .slide-title {
		font-size: var(--text-3xl);
	}

	.core-side-by-side .slide p {
		font-size: 1.0625rem;
		line-height: 1.8235;
	}
}