.ps-wrapper {
	width: var(--ps-width, 100%);
	height: auto;
	aspect-ratio: var(--ps-aspect, 16 / 9);
	position: relative;
	overflow: hidden;
}

.ps-wrapper.ps-fullbleed {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow: visible;
}

.ps-slider {
	position: absolute;
	inset: 0;
}

.ps-grid {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: repeat(var(--ps-rows), 1fr);
	grid-template-columns: repeat(var(--ps-cols), 1fr);
	gap: var(--ps-gap, 8px);
	direction: ltr; /* Prevent RTL mirroring of grid placement */
}

.ps-tile {
	position: relative;
	border-radius: var(--ps-radius, 12px);
	overflow: hidden;
	image-rendering: -webkit-optimize-contrast; /* Safari */
	image-rendering: optimizeQuality; /* General hint */
}

.ps-layer {
	position: absolute;
	inset: 0;
	background-size: calc(var(--ps-cols) * 100%) calc(var(--ps-rows) * 100%);
	background-position: var(--bg-x) var(--bg-y);
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity var(--ps-transition, 600ms) ease;
	will-change: opacity;
}

.ps-layer.visible { opacity: 1; }