.mermaid-banner {
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-image: var(--banner-lg);
	aspect-ratio: 3;
	display: flex;
	align-items: flex-end;
}

.gallery h2.text-center {
	font-weight: 800;
}

@media (max-width: 1366px) {
	.mermaid-banner {
		aspect-ratio: 2;
	}
}

@media (max-width: 768px) {
	.mermaid-banner {
		background-image: var(--banner-sm);
		aspect-ratio: 3/2;
	}
}
@media (max-width: 640px) and (orientation: portrait) {
	.mermaid-banner {
		aspect-ratio: 1;
	}
}


.mermaid-content {
	font-size: 1.25em;
	line-height: 1.25;
	display: grid;
	align-items: stretch;
	grid-template:
    'img desc'
    'img gallery';
	grid-template-columns: 2fr 5fr;
}
/*
.mermaid-image-wrapp {
	grid-area: img;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
}
.mermaid-desc {
	grid-area: desc;
	text-align: justify;
}*/
.mermaid-desc,
.mermaid-content {
	display: block;
}
.mermaid-image-wrapp{
	display: block;
	float: left;
	max-width: 256px;
}

.gallery {
	grid-area: gallery;
	clear: both;
}

.mermaid-desc {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
@media (max-width: 1344px) {
	.mermaid-content {
		grid-template:
    'img desc'
    'gallery gallery';
		grid-template-columns: 1fr 3fr;
	}
}
@media (max-width: 1200px) {
	.mermaid-content {
		grid-template-columns: 1fr 2fr;
	}
}
@media (max-width: 1024px) {
	.mermaid-desc,
	.mermaid-content {
		display: block;
	}
	.mermaid-image-wrapp{
		display: block;
		float: left;
		max-width: 256px;
	}
}
@media (max-width: 768px) {
	.mermaid-image-wrapp {
		display: none;
	}
}


.gallery-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}
.gallery-game img {
	height: 250px !important;
}

@media (max-width: 768px) {
	.gallery-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.gallery-game img {
		height: auto !important;
	}
}

.gallery-item {
	overflow: hidden;
}

.gallery-item a {
	display: block;
	width: 100%;
	aspect-ratio: 2/3;
	background-size: cover;
	background-position: center center;
	transition-duration: 0.3s;
}

.gallery-item a:hover {
	transform: scale(1.1);
}

.waterworld-links {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	gap: 12px;
}

.waterworld-links > a {
	text-align: center;
	min-width: 200px;
}

.waterworld-links > a {
	margin: 0;
}

@media (max-width: 480px) {
	.waterworld-links {
		flex-direction: column;
	}
}