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

	position: relative;
	container-type: inline-size;
	color: var(--blue-dark);
	overflow: hidden;

	.widget-inner {
		position: relative;
		z-index: 2;
		max-width: 1400px;
		padding: 26px var(--space-5) var(--space-6);
		margin: 0 auto var(--widget-margin-bottom);

		&::before {
			position: absolute;
			inset: 0 0 0 55px;
			z-index: -1;
			display: block;
			content: '';
			background: var(--teal-light-2);
		}
	}

	.widget-header {
		padding: 0 10px;
		margin-bottom: var(--space-6);
	}

	.widget-title {
		margin-bottom: 6px;
	}

	.widget-subtitle,
	.widget-title-text {
		display: block;
		line-height: 1;
	}

	.widget-subtitle {
		margin-bottom: var(--space-2);
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-base);
		letter-spacing: 0.125em;
		text-transform: uppercase;
		color: rgba(16, 43, 78, 0.75);
	}

	.widget-title-text {
		font-family: var(--font-display);
		font-weight: var(--font-weight-black);
		font-size: 2.875rem;
		color: inherit;
	}

	.widget-desc {
		margin: 0;
		font-family: var(--font-body);
		font-weight: var(--font-weight-normal);
		font-size: var(--text-lg);
		line-height: calc(14/9);
		color: inherit;
	}

	.view-all-col {
		margin-top: var(--space-3);
	}

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

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

	.slide {
		color: var(--white);
		mask:
			url('../svg/event-side-by-side-slide-mask.svg'),
			linear-gradient(var(--black) 0 0);
		mask-position: center calc(100% + 1px);
		mask-size:
			calc(100% + 2px) 5%,
			100% 100%;
		mask-repeat: no-repeat;
		mask-composite: exclude;
	}

	.slide > .inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.content-section,
	.slide-top {
		grid-area: 1 / 1 / 1 / 1;
	}

	.content-section {
		z-index: 4;
		align-self: end;
		padding: var(--space-3) var(--space-5);
		pointer-events: none;

		a,
		button {
			pointer-events: all;
		}
	}

	.info-flag {
		display: block;
		margin-bottom: var(--space-1);
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-sm);
		line-height: 1;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: inherit;
	}

	.slide-title {
		margin: 0;
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: 1.375rem;
		line-height: calc(23/22);
		letter-spacing: -0.01em;
		color: inherit;

		a {
			font: inherit;
			text-decoration: none;
			color: inherit;
		}
	}

	.details {
		margin-top: 3px;
	}

	.slide-top {
		padding-top: var(--space-5);
	}

	.slide-top .mini-date-section {
		--month-size: var(--text-base);
		--day-size: 2.1875rem;

		inset: 0 10px auto auto;
		width: 90px;

		&::before {
			inset: 10px;
		}

		.date-day {
			line-height: 0.8;
		}
	}

	.img-cont {
		overflow: hidden;

		&::before {
			position: absolute;
			inset: 0;
			z-index: 2;
			display: block;
			content: '';
			background: linear-gradient(227deg, rgba(14, 30, 50, 0.00) 48.56%, rgba(14, 30, 50, 0.75) 99.27%);
			pointer-events: none;
		}
	}

	.slide-img {
		scale: 1.05;
		width: 100%;
		transition: scale var(--transition-appendix);
	}

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

	@media (hover: hover) {
		.slide:hover .slide-img {
			scale: 1;
		}
	}
	
	@container (min-width: 40em) {
		.slide {
			mask-size:
				calc(100% + 2px) 7%,
				100% 100%;
		}

		.content-section {
			padding: var(--space-10);
		}

		.info-flag {
			font-size: 0.9375rem;
		}

		.slide-title {
			font-size: 2rem;
			line-height: calc(33/32);
		}

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

	@container (min-width: 64em) {
		.widget-inner {
			display: grid;
			grid-template-columns: minmax(0, 1fr) 51.5%;
			align-items: end;
			gap: var(--space-20);
			padding: 0 var(--space-5) var(--space-10);

			&::before {
				inset: 87px auto 0 77px;
				width: 100vw;
			}
		}

		.widget-header {
			width: 100%;
			max-width: 480px;
			padding: 0;
			margin: 0 0 30px auto;
		}

		.widget-title {
			margin-bottom: var(--space-4);
		}

		.widget-subtitle {
			margin-bottom: 14px;
			font-size: var(--text-xl);
		}

		.widget-title-text {
			font-size: 4.375rem;
		}

		.widget-desc {
			font-size: var(--text-xl);
			line-height: 1.4;
		}

		.view-all-col {
			margin-top: var(--space-10);
		}

		.slide-top {
			padding-top: 42px;
		}

		.slide-top .mini-date-section {
			--month-size: 1.625rem;
			--day-size: 3.625rem;

			right: var(--space-10);
			width: 150px;

			&::before {
				inset: var(--space-4);
			}
		}
	}

	@container (min-width: 77em) {
		.widget-inner::before {
			left: calc(50vw - 541px);
		}
	}

	@container (min-width: 87.5em) {
		.widget-inner::before {
			left: 160px;
		}
	}
}

/*========================================*/
/*=====----- PAIRED WITH TICKER -----=====*/
/*========================================*/

.contentRender_name_plugins_collections_template_custom_event_side_by_side:has(+ .contentRender_name_plugins_collections_template_custom_ticker_3_across) .widget-inner {
	margin-bottom: 2px !important;
}