/* Post Gallery widget. Columns, gap and radius come from Elementor controls via CSS variables. */

.pga {
	--pga-columns: 3;
	--pga-gap: 12px;
	--pga-radius: 10px;
}

.pga-item {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var( --pga-radius );
}

.pga-link {
	display: block;
	width: 100%;
	height: 100%;
}

.pga-img {
	display: block;
	width: 100%;
	transition: transform 0.4s ease;
}

/* Grid: every tile the same shape (ratio set by the "Image ratio" control). */
.pga--grid {
	display: grid;
	grid-template-columns: repeat( var( --pga-columns ), minmax( 0, 1fr ) );
	gap: var( --pga-gap );
}

.pga--grid .pga-item {
	aspect-ratio: 1 / 1;
}

.pga--grid .pga-img {
	height: 100%;
	object-fit: cover;
}

/* Masonry: original proportions, column-based. */
.pga--masonry {
	column-count: var( --pga-columns );
	column-gap: var( --pga-gap );
}

.pga--masonry .pga-item {
	margin-bottom: var( --pga-gap );
	break-inside: avoid;
}

.pga--masonry .pga-img {
	height: auto;
}

@media ( hover: hover ) {
	.pga-zoom-yes .pga-item:hover .pga-img {
		transform: scale( 1.05 );
	}
}