.gallery__slider {
	position: relative;
}

/* Espaço embaixo pra paginação (bolinhas) não ficar em cima da imagem. */
.gallery__slider .swiper {
	padding-bottom: 44px;
}

.gallery .swiper-pagination {
	position: absolute;
	bottom: 0;
}

/* Largura NATURAL de cada imagem pra uma altura fixa (--gallery-slide-height)
   — não são colunas de largura igual. É isso que faz o Swiper
   (slidesPerView:"auto", ver preset "galeria" em swiper-helper.js) mostrar
   só quantas imagens completas couberem, cortando a próxima na borda.
   Seletor com 2 classes (em vez de só ".gallery__slide") de propósito: o
   CSS do Swiper (.swiper-slide{width:100%}) tem a MESMA especificidade
   (0,1,0) — sem isso, quem ganha a guerra de cascata vira refém da ordem
   de enqueue dos dois arquivos, que pode inverter dependendo do hook. */
.swiper-slide.gallery__slide {
	width: auto;
	height: var(--gallery-slide-height, 420px);
}

.gallery__image {
	display: block;
	width: auto;
	max-width: none; /* sobrescreve o reset global (img{max-width:100%}) que travaria a largura no tamanho do slide */
	height: 100%;
	cursor: pointer;
}

@media (max-width: 767px) {
	.swiper-slide.gallery__slide {
		height: calc(var(--gallery-slide-height, 420px) * .6);
	}
}

/* Editor: sem Swiper de verdade (ver blocks/src/gallery/preview.js) — só
   uma fileira com scroll horizontal, pra dar uma ideia do resultado sem
   rodar o Swiper dentro do canvas (mesmo esquema do Case/Depoimentos). */
.gallery__slider--editor {
	display: flex;
	gap: var(--gallery-space-between, 16px);
	overflow-x: auto;
	padding-bottom: 0;
}

.gallery__slider--editor .gallery__slide {
	flex-shrink: 0;
	width: auto;
	height: var(--gallery-slide-height, 420px);
}