/* /design-system/components/art-diorama — demo rows for the dioramas
   specimen page. The art-diorama component itself is styled by
   styles/components/art-diorama.css. */

.diorama-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gutter);
	margin-block: 1em;
}

.diorama-row art-diorama {
	display: block;
	position: relative;
	width: 120px;
	aspect-ratio: 3 / 4;
	background: #0a0a14;
}

.diorama-row--sizes art-diorama {
	width: auto; /* let per-size classes drive width */
}

.diorama--small  { width: 60px;  aspect-ratio: 1 / 2; }
.diorama--medium { width: 100px; aspect-ratio: 1 / 2; }
.diorama--large  { width: 160px; aspect-ratio: 1 / 2; }