.animalart-product-gallery {
	--animalart-product-gallery-content: min(1330px, calc(100% - 48px));
	box-sizing: border-box;
	width: var(--animalart-product-gallery-content);
	margin: clamp(3rem, 6vw, 6rem) auto 0;
	padding-top: clamp(2rem, 4vw, 4rem);
	color: var(--animalart-ink, #171717);
	border-top: 1px solid var(--animalart-line, #e5e5e5);
}

.animalart-product-gallery *,
.animalart-product-gallery *::before,
.animalart-product-gallery *::after {
	box-sizing: border-box;
}

.animalart-product-gallery__inner {
	width: 100%;
}

.animalart-product-gallery__heading {
	max-width: 1330px;
	margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
	text-align: center;
}

.animalart-product-gallery__eyebrow {
	margin: 0 0 0.5rem;
	color: var(--animalart-ink, #171717);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.animalart-product-gallery__heading h2 {
	margin: 0;
	font-family: var(--animalart-font-display, Arial, sans-serif);
	font-size: clamp(1.65rem, calc(3vw * var(--animalart-escala, 1)), 2.8rem);
	font-weight: 900;
	line-height: 1.08;
}

/*
 * Linha flexível em vez de grade fixa: com qualquer quantidade de fotos a
 * última linha fica centralizada e nunca sobra célula vazia (item 20,
 * 8 out. 2026). Seis por linha no desktop, três no mobile.
 */
.animalart-product-gallery__grid {
	--animalart-product-gallery-columns: 6;
	--animalart-product-gallery-gap: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--animalart-product-gallery-gap);
}

.animalart-product-gallery__item {
	flex: 0 0 calc((100% - (var(--animalart-product-gallery-columns) - 1) * var(--animalart-product-gallery-gap)) / var(--animalart-product-gallery-columns));
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border-radius: var(--animalart-radius-md, 8px);
}

.animalart-product-gallery__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 0.72;
	object-fit: cover;
}

@media (max-width: 782px) {
	.animalart-product-gallery {
		--animalart-product-gallery-content: min(540px, calc(100% - 24px));
		margin-top: 3rem;
		padding-top: 2rem;
	}

	.animalart-product-gallery__grid {
		--animalart-product-gallery-columns: 3;
	}
}

@media (max-width: 420px) {
	.animalart-product-gallery {
		--animalart-product-gallery-content: calc(100% - 20px);
	}

	.animalart-product-gallery__grid {
		--animalart-product-gallery-gap: 0.4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.animalart-product-gallery__item img {
		transition: none;
	}
}