.mx-storyline {
	position: relative;
}

.mx-storyline__line {
	position: absolute;
	top: 44px;
	bottom: 20px;
	left: 73px;
	width: 1px;
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(137, 138, 252, .35) 0,
		rgba(137, 138, 252, .35) 4px,
		transparent 4px,
		transparent 10px
	);
}

.mx-storyline__line-progress {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 0;
	background-image: repeating-linear-gradient(
		to bottom,
		#898afc 0,
		#898afc 4px,
		transparent 4px,
		transparent 10px
	);
}

.mx-storyline__item {
	display: flex;
	gap: 56px;
	align-items: flex-start;
	position: relative;
	padding-left: 20px;
}

.mx-storyline__item:not(:last-child) {
	margin-bottom: 80px;
}

.mx-storyline__info {
	flex: 1 1 560px;
	max-width: 560px;
}

.mx-storyline__date {
	display: inline-flex;
	align-items: center;
	padding: 24px 32px 24px 24px;
	background: #f5f5f5;
	border-radius: 12px;
	margin-bottom: 32px;
	backdrop-filter: blur(30px);
	box-shadow: inset 0px 0px 12px 0 rgba(85, 0, 255, 0.08);
	border: solid 1px #fff;
}

.mx-storyline__date-icon {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 22px;
	flex-shrink: 0;
}

.mx-storyline__date-dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #7c4eff;
}

.mx-storyline__date-text {
	font-size: 22px;
	font-weight: 600;
	color: #7c4eff;
}

.mx-storyline__events {
	list-style: none;
	margin: 0;
	padding: 0 0 0 130px;
}

.mx-storyline__event {
	display: flex;
	align-items: flex-start;
}

.mx-storyline__event:not(:last-child) {
	margin-bottom: 32px;
}

.mx-storyline__event-icon {
	width: 32px;
	height: 32px;
	margin-right: 24px;
	flex-shrink: 0;
}

.mx-storyline__event-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.mx-storyline__event-text {
	font-size: 24px;
	font-weight: 500;
}

.mx-storyline__event-text strong,
.mx-storyline__event-text b {
	font-weight: 600;
}

.mx-storyline__event-text p {
	margin: 0;
}

.mx-storyline__photos {
	position: relative;
	flex: 1 1 auto;
}

.mx-storyline__photo {
	position: absolute;
}

.mx-storyline__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	box-sizing: border-box;
}

/* una foto */
.mx-storyline__photos--count-1 {
	width: 450px;
	height: 290px;
}
.mx-storyline__photos--count-1 .mx-storyline__photo--0 {
	width: 450px;
	height: 290px;
	top: 0;
	left: 0;
}

/* due foto orizzontale */
.mx-storyline__photos--count-2.is-layout-orizzontale {
	width: 630px;
	height: 290px;
}
.mx-storyline__photos--count-2.is-layout-orizzontale .mx-storyline__photo {
	width: 388px;
	height: 250px;
}
.mx-storyline__photos--count-2.is-layout-orizzontale .mx-storyline__photo--0 {
	top: 40px;
	left: 0;
	z-index: 1;
}
.mx-storyline__photos--count-2.is-layout-orizzontale .mx-storyline__photo--1 {
	top: 0;
	left: 242px;
	z-index: 2;
}

/* due foto verticale */
.mx-storyline__photos--count-2.is-layout-verticale {
	width: 450px;
	height: 450px;
}
.mx-storyline__photos--count-2.is-layout-verticale .mx-storyline__photo {
	width: 306px;
	height: 346px;
}
.mx-storyline__photos--count-2.is-layout-verticale .mx-storyline__photo--0 {
	top: 0;
	left: 0;
	z-index: 1;
}
.mx-storyline__photos--count-2.is-layout-verticale .mx-storyline__photo--1 {
	top: 40px;
	left: 144px;
	z-index: 2;
}

/* tre foto */
.mx-storyline__photos--count-3 {
	width: 630px;
	height: 480px;
}
.mx-storyline__photos--count-3 .mx-storyline__photo {
	width: 371px;
	height: 240px;
}
.mx-storyline__photos--count-3 .mx-storyline__photo--0 {
	top: 0;
	left: 0;
	z-index: 2;
}
.mx-storyline__photos--count-3 .mx-storyline__photo--1 {
	top: 20px;
	left: 259px;
	z-index: 3;
}
.mx-storyline__photos--count-3 .mx-storyline__photo--2 {
	top: 225px;
	left: 130px;
	z-index: 1;
}

.mx-storyline__photo img{
	border: 1px solid #fff;
	border-radius: 16px;
}

.mx-storyline__photos--count-3 .mx-storyline__photo--0 img {
	transform: rotate(-3deg);
	z-index: 1;
}

.mx-storyline__photos--count-3 .mx-storyline__photo--1 img {
	transform: rotate(3deg);
}

.mx-storyline__photos--count-1 .mx-storyline__photo img {
	transform: rotate(-3deg)
}

.mx-storyline__photos--count-2.is-layout-verticale .mx-storyline__photo--0 {
	transform: rotate(-4deg)
}

.mx-storyline__photos--count-2.is-layout-verticale .mx-storyline__photo--1 {
	transform: rotate(4deg)
}

.mx-storyline__photos--count-2 .mx-storyline__photo--0 {
	transform: rotate(-2deg)
}

.mx-storyline__photos--count-2 .mx-storyline__photo--1 {
	transform: rotate(2deg)
}

@media screen and (max-width: 1024px) {
	.mx-storyline__line {
		top: 44px;
		bottom: auto;
		left: 0;
		height: 1px;
		background-image: repeating-linear-gradient(
			to right,
			rgba(137, 138, 252, .35) 0,
			rgba(137, 138, 252, .35) 4px,
			transparent 4px,
			transparent 10px
		);
	}

	.mx-storyline__line-progress {
		display: none;
	}

	.mx-storyline {
		display: flex;
		flex-wrap: nowrap;
	}

	.mx-storyline__item {
		flex: 0 0 100%;
		min-width: 0;
		overflow: hidden;
		flex-direction: column;
		gap: 0;
		margin-bottom: 0;
		padding-left: 0;
	}

	.mx-storyline__info {
		flex: 0 0 auto;
		max-width: 100%;
	}

	.mx-storyline__events {
		padding-left: 0;
	}

	.mx-storyline__photos,
	.mx-storyline__photos--count-1,
	.mx-storyline__photos--count-2.is-layout-orizzontale,
	.mx-storyline__photos--count-2.is-layout-verticale,
	.mx-storyline__photos--count-3 {
		position: static;
		width: 100%;
		height: auto;
		margin-top: 32px;
		display: flex;
		gap: 16px;
	}

	.mx-storyline__photo,
	.mx-storyline__photos--count-1 .mx-storyline__photo--0,
	.mx-storyline__photos--count-2.is-layout-orizzontale .mx-storyline__photo,
	.mx-storyline__photos--count-2.is-layout-verticale .mx-storyline__photo,
	.mx-storyline__photos--count-3 .mx-storyline__photo {
		position: static;
		top: auto;
		left: auto;
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.mx-storyline__photos--count-1 .mx-storyline__photo--0 {
		width: 100%;
	}

	.mx-storyline__photos--count-2.is-layout-orizzontale .mx-storyline__photo,
	.mx-storyline__photos--count-2.is-layout-verticale .mx-storyline__photo {
		width: calc(50% - 8px);
	}

	.mx-storyline__photos--count-3 .mx-storyline__photo {
		width: calc(33.333% - 11px);
	}
	
	.mx-storyline__photo img {
		height: auto;
	}
	
	.mx-storyline__date-text {
		font-size: 18px;
	}
	
	.mx-storyline__event-text {
		font-size: 18px;
	}
	
	.mx-storyline__item {
		padding-right: 48px;
	}
	
	.mx-storyline__photos, .mx-storyline__photos--count-1, 
	.mx-storyline__photos--count-2.is-layout-orizzontale, .mx-storyline__photos--count-2.is-layout-verticale, 
	.mx-storyline__photos--count-3 {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0;
	}
	
	.mx-storyline__photos--count-3 .mx-storyline__photo {
		width: 50%;
	}
	
	.mx-storyline__photos--count-3 .mx-storyline__photo--0 {
		transform: translateX(10px)
	}
	
	.mx-storyline__photos--count-3 .mx-storyline__photo--2 {
		transform: translateY(-10px)
	}
	
	.mx-storyline__photos--count-2 .mx-storyline__photo--0,
	.mx-storyline__photos--count-2.is-layout-verticale .mx-storyline__photo--0 {
		transform: translateX(20px) rotate(-8deg);
	}
	
	.mx-storyline__photos--count-2 .mx-storyline__photo--01,
	.mx-storyline__photos--count-2.is-layout-verticale .mx-storyline__photo--1 {
		transform: translateX(-20px) rotate(8deg);
	}
}