/*
	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-v2-side-by-side .slide-title {
	font-size: 2rem;
	color: var(--sw-collections-title-color);
	font-family: var(--font-meshed-med);
	font-weight: 500;
	line-height: 1;

	.slide-title-text {
		display: flex;
		flex-direction: column;
		text-transform: uppercase;

		& i {
			margin: 0;
			text-transform: initial;
		}

		@media (width >= 40em) {
			text-transform: unset;
		}
	}
}

.core-v2-side-by-side .slide-desc {
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.core-v2-side-by-side .slides .inner {
	.content-section {
		margin-bottom: var(--space-8);
		position: relative;
		overflow: hidden;

		&::before {
			/* content: ''; */
			position: absolute;
			top: 0;
			right: 0;
			background: right / contain no-repeat url(/includes/public/assets/shared/decorations/icon_fleur.svg);
			height: 128px;
			width: 128px;
			opacity: 0.25;
			transform: translateX(60%);
			z-index: -1;
			pointer-events: none;
		}
	}
}

.core-v2-side-by-side .slide-footer {
	max-width: 530px;
	align-items: center;
}

.core-v2-side-by-side:not(.side-by-side-v2-2-across) .slide-footer .read-more {
	color: var(--sw-collections-bg-read-more-color);
	border: 2px solid var(--sw-collections-bg-read-more-border-color);
	background: var(--sw-collections-bg-read-more-bg);
	padding: var(--space-3) var(--space-8);
	border-radius: unset;
	font-weight: 600;

	&::before {
		display: none;
	}
}

@media (width >= 64em) {
	.core-v2-side-by-side.full-width .slides .inner .content-section {
		margin: 0;
		height: 100%;
	}

	.core-v2-side-by-side .slides .inner .content-section {
		padding: 40px;

		.slide-title {
			font-size: 5rem;
		}

		.slide-desc {
			font-size: var(--text-xl);
			max-width: 530px;
		}

		&::before {
			height: 451px;
			width: 451px;
			right: 0;
			bottom: 0;
			top: unset;
			transform: translate(35%, 5%);
		}
	}
}

@media (width >= 90em) {
	.core-v2-side-by-side.full-width .slides .inner .content-section {
		padding: 0 0 0 135px;
	}
}

@media (hover: hover) {
	.core-v2-side-by-side .slide-title > a:hover {
		color: inherit;
	}

	.core-v2-side-by-side:not(.side-by-side-v2-2-across) .slide-footer .read-more:hover {
		background: var(--sw-collections-bg-read-more-bg-hover);
		color: var(--sw-collections-bg-read-more-color-hover);
	}
}