/**
 * Polaroid front-end styling
 *
 * Defines front-end styling. All view.css files
 * like this one only load when enqueued manually
 * or via a block.json file. You can import this
 * file into an editor.css file to apply these
 * front-end styles within the block editor.
 */

.polaroid {
	display: grid;
	align-content: center;
	justify-items: center;
	padding: 20%;
}

.wp-block-column > .polaroid {
		min-height: 100%;
	}
.polaroid__item {
	min-width: 0;
	grid-column: 1;
	grid-row: 1;
	aspect-ratio: 320 / 370;
	max-width: 100%;
	padding: 1em;
	background-color: var(--c-0-7);
	border-radius: 0.3em;
	box-shadow: var(--shadow-s);
	transform: rotate(calc(2deg * var(--i)));
}
.polaroid__item img,
	.polaroid__item video {
		aspect-ratio: 1;
		object-fit: cover;
	}
.polaroid__item:nth-child(1) {
		transform: rotate(5deg) translate(15%, 18%);
		transition-delay: calc(0.5s * var(--i));
	}
.polaroid__item:nth-child(2) {
		transform: rotate(-4deg) translateX(-25%);
		transition-delay: calc(0.5s * var(--i));
	}
.polaroid__item:nth-child(3) {
		transform: rotate(7deg) translate(-15%, -15%);
		transition-delay: calc(0.5s * var(--i));
	}
.polaroid__item:nth-child(4) {
		transform: rotate(-10deg) translate(15%, -15%);
		transition-delay: calc(0.5s * var(--i));
	}
.polaroid:not(.is-shown) .polaroid__item {
		transform: scale(1.5);
		opacity: 0;
		transition-delay: 0s;
	}
.polaroid.is-shown .polaroid__item {
		transition:
			transform 0.6s cubic-bezier(0.18, 0.34, 0, 1.13),
			opacity 0.2s;
		transition-delay: calc(var(--i) * 0.5s);
	}