/*==============================*/
/*=====----- TEMPLATE -----=====*/
/*==============================*/

.side-by-side-slider {
	--key-color: var(--burgundy);

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

	&.blue-dark {
		--key-color: var(--blue-dark);
	}

	&.beige {
		--key-color: var(--beige);

		color: var(--gray-dark);
	}

	.widget-inner {
		width: 100%;
		max-width: 1160px;
		margin: 0 auto;
	}

	.widget-header {
		padding: 0 var(--space-5) var(--space-5);
	}

	.widget-header .widget-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: var(--font-weight-extrabold);
		font-size: 2rem;
		line-height: 1.1;
		color: var(--sw-collections-title-color);
		max-width: 20ch;
	}

	.glide__arrows {
		position: absolute;
		inset: auto 0 calc(54.667vw + 35px);
		z-index: 2;
		translate: 0 50%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
		pointer-events: none;
	}

	.glide__arrow {
		margin: 0;
	}

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

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

	.slide-top {
		margin-top: auto;
	}

	.slide-img {
		width: 100%;
	}

	.slide {
		height: auto;
		padding: 35px var(--space-5);
		background-color: var(--key-color);
	}

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

	.content-section,
	.content-upper {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: var(--space-5);
	}

	.info-flag,
	.sponsored {
		color: inherit;

		&::before {
			background-color: currentColor;
		}
	}

	.slide-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: var(--font-weight-extrabold);
		font-size: 1.75rem;
		line-height: 1.2;
		color: inherit;
	}

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

	.slide-footer .read-more {
		--background-color: var(--off-white) !important;
		--background-color-hover: var(--off-white) !important;

		&::after {
			color: inherit !important;
		}
	}

	&.burgundy .slide-footer .read-more {
		--text-color: var(--burgundy);
		--text-color-hover: var(--burgundy);
	}

	&.blue-dark .slide-footer .read-more {
		--text-color: var(--blue-dark);
		--text-color-hover: var(--blue-dark);
	}

	&.beige .slide-footer .read-more {
		--text-color: var(--gray-dark);
		--text-color-hover: var(--gray-dark);

		@media (hover: hover) {
			&:hover {
				background: transparent;
			}
		}
	}

	@media (hover: hover) {
		&:is(.blue-dark, .burgundy) .slide-footer .read-more:hover {
			background: transparent;
			color: #fff;
		}
	}
	/*===================================*/
	/*=====----- MEDIA QUERIES -----=====*/
	/*===================================*/

	@container (min-width: 40em) {
		.glide__slides {
			align-items: center;
		}

		.glide__arrows {
			inset: 50% 0 auto;
			translate: 0 -50%;
		}

		.widget-header .widget-title {
			margin-bottom: -50px;
			min-height: 80px;
			display: grid;
			align-items: end;
		}

		.slide {
			padding: 0 var(--space-16);
			background: none;
			&::before {
				position: absolute;
				inset: 50px 0;
				z-index: -1;
				display: block;
				width: calc(200% + (var(--space-16) * 2) + 30px);
				content: '';
				background: var(--key-color);
				pointer-events: none;
			}
		}

		.slide > .inner {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			align-items: center;
		}

		.content-section {
			position: relative;
			z-index: 2;
			padding: var(--space-20) 0;
		}

		.slide-top {
			z-index: 3;
			margin: 0;
		}
	}

	@container (min-width: 64em) {
		.widget-header .widget-title {
			font-size: 2.5rem;
			line-height: 1.2;
			margin-bottom: -80px;
			min-height: 80px;
		}

		.slide {
			padding: 0 120px;
			&::before {
				left: -120px;
				width: calc(100% + 660px + var(--space-20));
				inset: 80px 0;
			}
		}

		.slide > .inner {
			grid-template-columns: minmax(0, 1fr) 420px;
			gap: var(--space-20);
		}

		.content-section {
			gap: 26px;
			padding: 85px 0;
		}

		.content-upper {
			gap: 14px;
		}

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

	@container (min-width: 90em) {
		.glide__arrows {
			right: -25px;
			left: -25px;
			padding: 0;
		}
	}
}