.custom-side-by-side {
	/*==============================*/
	/*=====----- TEMPLATE -----=====*/
	/*==============================*/

	position: relative;
	container-type: inline-size;
	margin-bottom: var(--widget-margin-bottom);
	color: var(--white);

	.widget-inner {
		position: relative;
		z-index: 2;
		padding: 15px;
	}

	.background {
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;

		.slide-img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.slides {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: var(--space-4);
		max-width: 1220px;
		margin: 0 auto;
	}

	/*============================*/
	/*=====----- SLIDES -----=====*/
	/*============================*/

	.slide,
	.slide-top,
	.img-cont,
	.slide-img,
	.content-section {
		position: relative;
	}

	.slide {
		padding: 30px 30px 43px;
		background: rgba(71, 58, 50, 0.93);
	}

	.slide-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 30px;
	}

	.slide-top {
		order: -1;
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
	}

	.slide-img {
		width: 100%;
	}

	.shared-play-button {
		inset: auto 10px 10px auto;
		transform: none;
	}

	.slide-top .credits {
		right: auto;
		left: 0;
	}

	.ww-logo {
		display: none;
	}

	.slide-title {
		margin-bottom: var(--space-3);
		font-family: var(--font-display);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-3xl);
		line-height: 1;
		color: inherit;
	}

	.slide-desc {
		margin: 0;
		font-family: var(--font-crimson);
		font-weight: var(--font-weight-medium);
		font-size: var(--text-base);
		line-height: 1.3;
		color: inherit;
	}

	.slide-footer {
		margin-top: 15px;
	}

	/*===================================*/
	/*=====----- MEDIA QUERIES -----=====*/
	/*===================================*/

	@container (min-width: 40em) {
		.slide-inner {
			grid-template-columns: 45.18% minmax(0, 1fr);
			align-items: center;
			gap: var(--space-6);
		}

		.slide-top {
			order: unset;
		}
	}

	@container (min-width: 64em) {
		.widget-inner {
			padding: 70px 110px;
		}

		.slide {
			padding: 60px;
		}

		.slide-inner {
			gap: 93px;
		}

		.ww-logo {
			display: block;
			width: 95px;
			margin-bottom: 23px;
		}

		.slide-title {
			margin-bottom: 13px;
			font-size: 2.75rem;
		}

		.slide-desc {
			font-size: var(--text-lg);
		}

		.slide-footer {
			margin-top: var(--space-8);
		}
	}
}