refining modal to have a generic version

src/assets/css/components/layout/Page-container.scss

@@ -15,7 +15,7 @@
 		// height: 100vh;
 		// @apply overflow-x-hidden overflow-y-auto;
 		overflow: hidden;
-		@apply pb-44 pt-32 xl:pb-0 xl:pt-0;
+		@apply pb-44 pt-10  xl:pb-0 xl:pt-0;
 
 		@screen md {
 			height: calc(99.8dvh - $margin * 2);

src/assets/css/components/ui/Modal.scss

@@ -1,4 +1,4 @@
-body:has(dialog) {
+body:has(dialog[open]) {
 	overflow: hidden;
 }
 dialog {
@@ -25,6 +25,12 @@ dialog {
 		max-width: 80vw;
 		max-height: 90dvh;
 	}
+
+	&:has(.modal-content-container__modal-cover) {
+		.game-modal__close-button {
+			@apply top-8;
+		}
+	}
 }
 
 .game-modal {
@@ -38,25 +44,28 @@ dialog {
 }
 
 .modal-content-container {
-	@apply grid  
-	 gap-x-8
-
-	 md:grid-cols-2
+	@apply gap-x-8
 	 p-8 
 	 md:px-24
 	 pt-6
 	 md:pt-28
 	 pb-16
 	 bg-white
-
 	 md:bg-transparent;
 
 	box-sizing: border-box;
 	width: calc(100% - 20px);
-	margin: 10px auto 100px auto;
-
-	// grid-template-columns: 1fr 1fr;
+	// margin: 10px auto 100px auto;
+	margin: 10px auto 0px auto;
 
+	&--grided {
+		@apply grid md:grid-cols-2;
+	}
+	&--centered {
+		.modal-content-container__content {
+			@apply flex flex-col items-center justify-center text-center;
+		}
+	}
 	&__background {
 		@apply h-full w-full absolute top-0 left-0 object-fill;
 	}
@@ -76,6 +85,22 @@ dialog {
 	}
 	&__content {
 	}
+	@apply pt-12;
+
+	&:has(.modal-content-container__modal-cover) {
+		@apply mt-12 pt-28;
+	}
+
+	&:not(:has(h2)) {
+		.explanation {
+			@apply pt-8;
+		}
+	}
+
+	&__modal-cover {
+		@apply absolute top-0 bg-white w-24 h-24 p-6 rounded-full;
+		// transform: translateY(-50%);
+	}
 	&__cover {
 		@apply px-6 py-8 md:py-12 bg-neutral-50;
 		align-self: center;

src/components/game/GameQuestion.jsx

@@ -20,7 +20,7 @@ export default function GameQuestion({ questionId, correctAnswer }, ...props) {
 	}
 
 	return (
-		<div className='modal-content-container game-question-container'>
+		<div className='modal-content-container modal-content-container--grided game-question-container '>
 			<div className='modal-content-container__content'>
 				<h3 className='titling-construction '>{currentScreenTranslations.found}</h3>
 				<h2>{currentScreenTranslations.is_it_secure}</h2>