/* Polaris does the rest; this only lays out the photo grids. */
body {
	margin: 0;
	background: #f1f1f1;
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin-block-start: 16px;
}

.center {
	display: flex;
	justify-content: center;
	padding: 24px 0;
}

.frame {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 8px;
	background: #f7f7f7;
}

/* Sized before it loads, or a lazy image of 0×0 never starts loading. */
.frame img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Shows which parts of a cutout are transparent. */
.frame.checker {
	background-color: #fff;
	background-image: conic-gradient(#e3e3e3 25%, transparent 0 50%, #e3e3e3 0 75%, transparent 0);
	background-size: 16px 16px;
}

.product .title {
	display: block;
	margin-block-start: 8px;
	font-weight: 600;
}

/* A preview takes two columns: the photo now and the new one side by side. */
.card.is-preview {
	grid-column: span 2;
}

@media (max-width: 520px) {
	.card.is-preview {
		grid-column: auto;
	}
}

.compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.compare figure {
	margin: 0;
}

.compare figcaption {
	margin-block-start: 6px;
}