.events-marquee {
	/*==============================*/
	/*=====----- TEMPLATE -----=====*/
	/*==============================*/

	position: relative;
	container-type: inline-size;
	color: var(--brown);
	
	.widget-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 46px;
		max-width: 1566px;
		margin: 0 auto 140px;
	}

	.widget-header {
		display: contents;
	}

	.title-col,
	.view-all-col,
	.slide.small {
		padding: 0 var(--space-5);
	}

	.title-col {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 10px;
		max-width: 775px;
	}

	.widget-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: normal;
		font-size: var(--text-3xl);
		line-height: calc(7/6);
		letter-spacing: 0.13em;
		text-transform: uppercase;
		color: var(--blue-dark);
	}

	.widget-desc,
	.slide-desc {
		margin: 0;
		font-family: var(--font-body);
		font-weight: normal;
		font-size: var(--text-base);
		line-height: calc(23/16);
		letter-spacing: 0.02em;
		color: inherit;
	}

	.view-all-col {
		display: flex;
		justify-content: center;
		order: 3;
		margin-top: var(--space-2);
	}

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

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

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

	.slide-img {
		width: 100%;
	}

	.slide-inner .mini-date-section {
		--month-size: 0.9375rem;
		--day-size: 1.5625rem;

		border-radius: var(--rounded-circle);
	}

	.slide-top .mini-date-section {
		top: 12px;
		left: 18px;
		color: var(--blue-dark);
		background-color: var(--white);
	}

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

	.slide-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: normal;
		font-size: 1.375rem;
		line-height: calc(15/11);
		letter-spacing: 0.13em;
		text-transform: uppercase;
		color: var(--blue-dark);
	}

	.details {
		margin: 0;
		padding: 0;
		list-style: none;
		font-family: var(--font-body);
		font-weight: normal;
		font-size: var(--text-lg);
		line-height: calc(25/18);
		letter-spacing: 0.02em;
		color: inherit;
	}

	/*----- large slide -----*/

	.slide.large {
		margin-bottom: var(--space-2);
		box-shadow: 0 3px 15px rgba(0, 0, 0, 0.16);

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

		.slide-top {
			order: -1;
		}

		.content-section {
			padding: 28px 18px 55px;
			gap: 66px;
			background: var(--cream);
		}
	}

	/*----- small slides -----*/

	.slide.small {
		&:has(.mini-date-section) .slide-inner {
			display: grid;
			grid-template-columns: max-content minmax(0, 1fr);
			align-items: start;
			gap: 18px;
		}

		.mini-date-section {
			position: static;
			background-color: var(--blue);
		}
	}

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

	@container (min-width: 64em) {
		.widget-inner {
			grid-template-columns: 55.26% minmax(0, 1fr);
			gap: var(--space-10) 109px;
			padding: 0 var(--space-5);
			margin-bottom: 130px;
		}

		.title-col,
		.view-all-col,
		.slide.small {
			padding: 0;
		}

		.title-col {
			grid-column: span 2;
			gap: 35px;
			margin-bottom: var(--space-4);
		}

		.widget-title {
			font-size: 2.8125rem;
			line-height: calc(11/9);
		}

		.widget-desc,
		.slide-desc {
			font-size: var(--text-lg);
			line-height: calc(25/18);
			letter-spacing: 0.02em;
		}

		.view-all-col {
			display: block;
			grid-column: 2;
			margin-top: 57px;
		}

		.slides {
			display: contents;
		}

		.slide-inner .mini-date-section {
			--month-size: var(--text-lg);
			--day-size: 3.125rem;

			padding: 15px 29px;
		}

		.slide-top .mini-date-section {
			top: var(--space-6);
			left: 27px;
		}

		/*----- large slide -----*/

		.slide.large {
			grid-row: span 5;
			margin: 0;
			
			.content-section {
				padding: 38px var(--space-8) var(--space-12);
				gap: 19px;
			}

			.content-upper {
				gap: 28px;
			}
		}

		/*----- small slides -----*/

		.slide.small {
			margin-bottom: 26px;

			&:last-child {
				margin-bottom: 0;
			}

			&:has(.mini-date-section) .slide-inner {
				gap: 30px;
			}

			.content-section {
				gap: 14px;
			}

			.content-upper {
				gap: 11px;
			}
		}
	}
}