.page-container--thematiques {
	.inner-content {
		@apply pt-40;
	}

	h1 {
		@apply text-9xl;
	}

	--swiper-pagination-bullet-horizontal-gap: 8px;

	.swiper-pagination-bullet {
		@apply bg-construction;
		transition: scale 0.3s ease-in-out;
		opacity: 0.9;
		scale: 1.2;
	}
	.swiper-pagination-bullet-active {
		border: 2px solid white;
		scale: 1.5;
		opacity: 1;
	}
	.swiper-pagination {
		bottom: -120px !important;
	}
	.swiper-button-prev,
	.swiper-button-next {
		@apply bg-construction p-2 rounded-full w-auto;
		aspect-ratio: 1/1;
		&:after {
			@apply w-8 h-8 block bg-contain bg-no-repeat bg-center;
			content: "";
			background-image: url("../../img/icons/arrow-next.svg");
		}
	}
	.swiper-button-prev {
		left: -140px;
		&:after {
			transform: rotate(180deg);
		}
	}
	.swiper-button-next {
		right: -140px;
	}
	.swiper-container {
		@apply mt-32 pb-24 w-full mx-auto overflow-visible;
		max-width: 1200px;
		width: calc(100% - 280px);

		.swiper-slide {
			@apply h-auto text-center;
		}
	}

	.game-slide {
		overflow: visible !important;
		&__cover {
			@apply mx-auto border-white  border-solid  bg-white;
			box-sizing: border-box;
			width: 100%;
			border-width: 28px;
			aspect-ratio: 18/9;

			img {
				@apply h-full w-full object-cover object-center;
			}
		}

		&__title {
			@apply my-0  absolute top-0 left-1/2 bg-construction px-2 py-1;
			transform: translateX(-50%) translateY(-50%);
			transition: transform 0.3s ease-in-out;
			&:hover {
				transform: translateX(-50%) scale(1.2);
			}
			a {
				@apply text-slate-900 text-4xl text-zuume no-underline block;
			}
		}

		.cta--play {
			@apply absolute bottom-0 left-1/2;
			transform: translate(-50%, 50%);
		}
	}

	.swiper-slide:not(.swiper-slide-active) {
		opacity: 0.7;
		.cta--play {
			@apply hidden;
		}
	}
}