div#carnet {
	background: var(--background-alt);

	& section {
		padding: 4.5rem 20px 20px 20px;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		height: unset;
		min-height: calc(100dvh - 4.5rem - 20px);
		max-width: 420px;
		margin-inline: auto;
	}

	& h1 {
		width: fit-content;
        align-self: center;
		text-align: center;
		font-size: 28px;
		line-height: 36px;
		letter-spacing: 0.12px;
		border-bottom: solid 4px var(--wyg-blue-alt);
		padding-bottom: 8px;
	}

	& .page.blank {
		display: none;
	}

	& .flip-book-container {
		margin-top: 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	& .flip-book-container button {
		display: none;
	}

	& .buttons-mobile {
		display: flex;
		justify-content: center;
	}

	& :is(.flip-book-container, .buttons-mobile) button {
		height: 4em;
        width: 4em;
		background-color: transparent;
		box-shadow: none;
		background-size: 80%;
		background-position: center;
		background-repeat: no-repeat;
		transition: .1s ease-in;
		margin: 1.5rem 0 0 0;

		&.previous {
			margin-right: 1.5em;
			background-image: url('../images/icons/icon-left.svg');
		}

		&.next {
			margin-left: 1.5em;
			background-image: url('../images/icons/icon-right.svg');
		}

		&:hover {
			background-size: 100%;
		}

		&.previous:active {
			transform: translate(-.5em, 0);
		}

		&.next:active {
			transform: translate(.5em, 0);
		}
	}

	& .flip-book {
		margin-inline: 0;
		filter: drop-shadow(0 0 6px #000000A0);

		& :is(.--left, .--right)::after {
			content: '';
			position: absolute;
			display: block;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

		& :is(.page-cover-top, .page-cover-bottom)::after {
			background-color: #80808010;
		}

		& .--left:not(.page-cover-top):not(.page-cover-bottom)::after {
			background-image: linear-gradient(-90deg, #00000030 0%, #80808010 20%, #80808010 30%, #00000010 50%, #00000000 100%);
			box-shadow: inset 0 -1px 1px #c8c8c8;
		}

		& .--right:not(.page-cover-top):not(.page-cover-bottom)::after {
			background-image: linear-gradient(90deg, #00000030 0%, #80808010 20%, #80808010 30%, #00000010 50%, #00000000 100%);
			box-shadow: inset 0 -1px 1px #c8c8c8;
		}

	}

	& .page-content {
		height: 100%;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}
}

@media only screen and (min-width: 1024px) {

	div#carnet {

		& h1 {
			font-size: 36px;
			line-height: 48px;
			letter-spacing: 0.48px;
		}

		& div.page.blank {
			display: block;
		}

		& .flip-book-container button {
			display: initial;
		}

		& :is(.buttons-mobile, .buttons-mobile button) {
			display: none;
		}

		& section{
			max-width: unset;
		}
	}
}

@media only screen and (min-width: 1280px) {

	div#carnet {

		& .flip-book {
			margin-inline: 2rem;
		}
	}
}