/* Gallery page-only styles. */

.gallery-hero {
	--page-hero-image: url("../../images/banner/banner_12.jpg");
	--page-hero-position: center 44%;
}

.quote-grid {
display: grid;
	gap: 20px;
}

.quote-grid article {
overflow: hidden;
	background: var(--pastel-butter);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	box-shadow: var(--soft-shadow);
}

.quote-grid article:nth-child(4n + 2) {
	background: var(--pastel-mint);
}

.quote-grid article:nth-child(4n + 3) {
	background: var(--pastel-peach);
}

.quote-grid article:nth-child(4n + 4) {
	background: var(--pastel-lavender);
}

.quote-grid p {
color: var(--muted);
}

.quote-grid {
grid-template-columns: repeat(3, 1fr);
}

.gallery-pills {
display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.gallery-pills button {
min-height: 42px;
	padding: 0 16px;
	color: #435252;
	font-weight: 900;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-button);
	cursor: pointer;
}

.gallery-pills button.active,
.gallery-pills button:hover {
color: #fff;
	background: var(--primary);
	border-color: var(--primary);
}

.gallery-grid {
display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.gallery-grid figure {
position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--pastel-mint);
	border-radius: var(--radius-card);
	box-shadow: var(--soft-shadow);
}

.gallery-grid figure.is-hidden {
display: none;
}

.gallery-grid img {
width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 38%;
}

.gallery-grid figcaption {
position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 7px 11px;
	color: #fff;
	font-size: 13px;
	font-weight: 900;
	background: rgba(37, 50, 56, 0.74);
	border-radius: var(--radius-button);
}

.quote-grid article {
padding: 26px;
}

.quote-grid p {
margin-top: 0;
	font-size: 17px;
}

.quote-grid strong {
display: block;
	margin-top: 18px;
	color: var(--sage-dark);
}

@media (max-width: 1024px) {
	.quote-grid {
	grid-template-columns: repeat(2, 1fr);
	}
	
	.gallery-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.quote-grid {
	grid-template-columns: 1fr;
	}
	
	.gallery-grid {
	grid-template-columns: 1fr;
	}
}