body:has(dialog) {
	overflow: hidden;
}
dialog {
	border: none;
	transform: skew(0deg, -0.7deg);
	background-color: transparent;
	&::backdrop {
		backdrop-filter: blur(3px) brightness(0.4);
	}

	width: clamp(50%, 900px, 90%);

	overflow-y: scroll;
	overflow-x: hidden;
	max-width: 80vw;
	max-height: 90dvh;
}

.game-modal {
	&__close-button {
		@apply absolute top-3 right-3 bg-construction p-3 border-none cursor-pointer;
		img {
			@apply w-6 h-6;
		}
	}
	overflow: visible;
}

.modal-content-container {
	@apply w-full
	p-8 grid  gap-x-8;
	@apply pt-28 pb-16;

	box-sizing: border-box;
	grid-template-columns: 1fr 1fr;

	&__background {
		@apply h-full w-full absolute top-0 left-0 object-fill;
	}
	background-image: url("../../../img/shapes-background/modal-background.svg");
	background-position: center top;
	background-size: 100% 100%;
	background-repeat: no-repeat;

	h2 {
		@apply text-5xl py-8;
	}
	&__content {
	}
	&__cover {
		@apply px-6 py-12 bg-neutral-50;

		align-self: center;
		box-sizing: border-box;
		img {
			@apply block w-full h-auto object-contain object-center;
		}
	}
}
