/* Split from blocks.css (pom-theme-v2), 2026-07-12 */

/* Grid Gallery
--------------------------------------------- */

.gridgallery-block {
	background-color: var(--midnight-blue, #001F61);
	color: #fff;
	padding-top: 80px;
	padding-bottom: 80px;
}

.gridgallery-block__title {
	margin-bottom: 1.2em;
	max-width: 860px;
}

@media (min-width: 1200px) {
	.page-id-81917 .gridgallery-block__title {
		font-size: 75px;
	}
}

.page-id-81917 .gridgallery-block__title {
	font-size: 75px;
	font-size: var(--fluid-h2);
}

@media (min-width: 900px) {
	.gallery-grid {
		display: grid;
		gap: 16px;
		height: 100%;
		margin: auto;
		max-width: 1160px;
	}

	#gallery-grid__item-0 {
		grid-row: 1 / 8;
		grid-column: 1 / 8;
	}

	#gallery-grid__item-1 {
		/* grid-row: 1 / 4; */
		grid-row: 1 / 5;
		grid-column: 8 / 12;
	}

	#gallery-grid__item-2 {
		/* grid-row: 4 / 11; */
		grid-row: 5 / 11;
		grid-column: 8 / 12;
	}

	#gallery-grid__item-3 {
		grid-row: 8 / 11;
		grid-column: 1 / 8;
	}

	#gallery-grid__item-4 {
		grid-row: 11 / 18;
		grid-column: 1 / 5;
	}

	#gallery-grid__item-5 {
		grid-row: 11 / 18;
		grid-column: 5 / 12;
	}

	#gallery-grid__item-6 {
		grid-row: 18 / 25;
		grid-column: 1 / 8;
	}

	#gallery-grid__item-7 {
		/* grid-row: 18 / 21; */
		grid-row: 18 / 22;
		grid-column: 8 / 12;
	}

	#gallery-grid__item-8 {
		/* grid-row: 21 / 28; */
		grid-row: 22 / 28;
		grid-column: 8 / 12;
	}

	#gallery-grid__item-9 {
		grid-row: 25 / 28;
		grid-column: 1 / 8;
	}

	.gallery-grid__item {
		background-repeat: no-repeat;
		background-size: cover;
		background-position-x: right;
		background-position-y: center;
		position: relative;
	}

	.gallery-grid__image-mobile {
		display: none;
	}
}

.gallery-grid__link {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	cursor: pointer;
	z-index: 20;
}

.gallery-grid__item-header {
	/* max-width: 490px; */
	position: absolute;
	bottom: 30px;
	left: 30px;
	padding-right: 20px;
	z-index: 10;
}

.gallery-grid__item-title {
	color: #fff;
	margin-bottom: 15px;
	display: block;
	text-shadow: 0 0 10px rgb(0, 0, 0);
}

.gallery-snorkeling #gallery-grid__item-2 .gallery-grid__item-title {
	color: #000;
	text-shadow: none;
}

.gallery-snorkeling #gallery-grid__item-2 .btn-mini {
	box-shadow: inset 0 0 0 2px var(--button-bg);
}

.gallery-snorkeling #gallery-grid__item-2 .btn-mini:hover {
	box-shadow: inset 0 0 0 2px #000;
}

.gallery-snorkeling #gallery-grid__item-2 .btn-mini .btn__arrow line,
.gallery-snorkeling #gallery-grid__item-2 .btn-mini .btn__arrow path {
	stroke: var(--button-bg);
}

.gallery-snorkeling #gallery-grid__item-2.content-revealed .gallery-grid__item-title {
	color: #fff;
}

.content-revealed .btn-mini,
.content-revealed .btn-mini .btn__arrow line,
.content-revealed .btn-mini .btn__arrow path,
.gallery-snorkeling #gallery-grid__item-2.content-revealed .btn-mini:hover {
	stroke: var(--button-bg);
	box-shadow: inset 0 0 0 2px var(--button-bg);
}

.gallery-grid__item:after {
	content: "";
	background-color: #001F61;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	position: absolute;
	opacity: 0;
	transition: opacity .3s ease;
	z-index: 1;
}

.content-revealed:after {
	opacity: .8;
}

.gallery-grid__item-content {
	color: #fff;
	line-height: 1.45;
	margin-top: 0;
	/* max-width: 480px; */
	max-width: none;
	text-wrap: balance;
}

.gallery-grid__item-content p {
	color: #fff;
	line-height: 1.45;
	margin-top: 0;
	text-wrap: balance;
}

.gallery-grid__item-content a {
	color: var(--golden-grass-50);
	transition: color .2s ease;
}

.gallery-grid__item-content a:hover {
	color: var(--golden-grass);
}

.gallery-grid__item-link {
	color: #fff;
	display: inline-flex;
	gap: 10px;
	margin-bottom: 0;
	text-decoration: none;
}

/* CSS for the hidden content animation */
.gallery-grid__item-hidden {
	max-height: 0;
	overflow: hidden;
	transition: max-height 1s ease-out;
}

/* CSS class to apply when the content is revealed */
.gallery-grid__item-hidden.revealed {
	max-height: 500px;
}

@media (max-width: 899px) {
	.gallery-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		justify-content: center;
	}

	.gallery-grid__item {
		position: relative;
		height: auto;
		overflow: initial;
	}

	.gallery-grid__item-header {
		bottom: 20px;
		left: 24px;
	}

	.gallery-grid__item-content,
	.gallery-grid__item-link {
		font-size: 16px;
	}

	.gallery-grid__link {
		display: block;
		width: 100%;
		position: absolute;
		top: 0;
	}

	.gallery-grid__item-title {
		font-size: 24px;
		line-height: 1.1;
		/* max-width: 80%; */
	}
}

@media (min-width: 1200px) {
	.gridgallery-block {
		padding-top: 160px;
		padding-bottom: 160px;
	}
}