/* magazzine mobile */
section.magazzine {
	position: relative;
	background-image: url("/assets/img/bg.webp");
	background-repeat: repeat;
	background-size: auto;
	background-position: center;
}

section.magazzine > article {
	position: relative;
}

section.magazzine .header {
	padding: 3rem;
}

section.magazzine .pic {
	padding: 0 2rem;
}

section.magazzine .pic img {
	aspect-ratio: 2 / 2.5;
}

/* body swipe */
section.magazzine .body {
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100%;
	margin: 0;
	padding: 1rem;
	gap: 1rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding: 8%;
	-webkit-overflow-scrolling: touch;
}

section.magazzine .body::-webkit-scrollbar {
	display: none;
}

section.magazzine .body > dd {
	flex: 0 0 84%;
	width: 84%;
	min-width: 84%;
	margin: 0;
	padding: 2rem;
	scroll-snap-align: start;
	background: rgb(var(--b) / .45);
	border-radius: 1rem;
}

section.magazzine .body > dd h4 {
	margin: 0 0 1rem;
}

section.magazzine .body > dd p {
	margin: 0;
}

/* señales laterales */
section.magazzine .body-wrap {
	position: relative;
}

section.magazzine .body-wrap::before,
section.magazzine .body-wrap::after {
	content: "";
	position: absolute;
	top: 1rem;
	bottom: 4rem;
	width: 2.5rem;
	pointer-events: none;
	z-index: 5;
	opacity: 0;
	transition: opacity .25s ease;
}

section.magazzine .body-wrap::before {
	left: 0;
	background: linear-gradient(90deg, rgb(var(--b-dark) / .9), rgb(var(--b-dark) / 0));
}

section.magazzine .body-wrap::after {
	right: 0;
	background: linear-gradient(270deg, rgb(var(--b-dark) / .9), rgb(var(--b-dark) / 0));
}

section.magazzine.has-left .body-wrap::before,
section.magazzine.has-right .body-wrap::after {
	opacity: 1;
}

/* indicador */
section.magazzine .body-viewpoint {
	position: absolute;
	left: 50%;
	bottom: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	transform: translateX(-50%);
	z-index: 10;
	pointer-events: none;
}

section.magazzine .body-viewpoint span {
	display: block;
	width: .45rem;
	height: .45rem;
	border-radius: 50%;
	background: rgb(var(--n) / .35);
	transition:
		background .25s ease,
		transform .25s ease;
}

section.magazzine .body-viewpoint span.is-active {
	background: rgb(var(--c1) / 1);
	transform: scale(1.35);
}