/* Snaps Grid */
/* Wrapper: align to site gutters using global page padding */
.ws-snaps-wrap{
	width:100%;
	/* Match header width: page side padding already applied on #page-grid */
	margin:0;
	padding:0;
}

/* Ensure the grid itself fills the wrapper with no extra side padding */
#snaps-grid,
.ws-snaps-grid{
	width:100%;
	max-width:100%;
	margin:0;
	padding:0;
	overflow:visible;
}

#snaps-grid,
.snaps-grid-container,
.ws-snaps-grid,
.snaps-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:10px;
}

#snaps-grid{
	padding-top:60px;
}

@media (min-width:600px){
	#snaps-grid,
	.snaps-grid-container,
	.ws-snaps-grid,
	.snaps-grid{
		grid-template-columns:repeat(2, 1fr);
	}
}
@media (min-width:900px){
	#snaps-grid,
	.snaps-grid-container,
	.ws-snaps-grid,
	.snaps-grid{
		grid-template-columns:repeat(3, 1fr);
	}
}
@media (min-width:1200px){
	#snaps-grid,
	.snaps-grid-container,
	.ws-snaps-grid,
	.snaps-grid{
		grid-template-columns:repeat(4, 1fr);
		gap:20px;
	}
}

/* Items and fade-in animation */
.snap-item,
.ws-snap-wrap{
	position:relative;
	width:100%;
	aspect-ratio:1 / 1; /* Force perfect squares */
	display:block;
	background:transparent;
	overflow:hidden;     /* Crop overflow when covering */
	/* Reveal animation */
	opacity:0;
	transform:translateY(20px);
	/* Use shared motion tokens for consistent feel */
	transition:opacity var(--motion-duration-base) var(--motion-ease-standard), transform var(--motion-duration-base) var(--motion-ease-standard);
	will-change:opacity, transform;
}
.snap-item.is-visible{
	opacity:1;
	transform:translateY(0);
}

/* Images */
.snap-item img,
.ws-snap-wrap img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:contain;     /* Keep natural proportions, no cropping */
	object-position:center;
	display:block;
}

/* Loader */
#snaps-loader{
	text-align:center;
	padding:20px;
}