@layer components {
	/*
	 * The wallpapers, in their own shape.
	 *
	 * They are 9:16 — cut for a phone — where a photograph is 3:2 the other
	 * way. Sharing a grid with the photographs meant a row that turned on its
	 * side every second frame, which is the thing the owner asked to be rid
	 * of. Here the cards are all one shape, and it is the shape they are.
	 */
	.catalog.is-wall .catalog-card {
		width: clamp(110px, min(11vw, 17vh), 190px);
		aspect-ratio: 9 / 16;
	}

	.wall-line {
		margin: 0;
		font-family: var(--font-display);
		font-size: clamp(1rem, 1.9vw, 1.75rem);
		line-height: 1.16;
		letter-spacing: -0.02em;
		text-align: center;
		text-wrap: balance;
		max-width: 34ch;
		margin-inline: auto;
		color: var(--over-ink);
		opacity: 0;
		translate: 0 0.75rem;
		transition:
			opacity var(--dur-slow) var(--ease-out),
			translate var(--dur-slow) var(--ease-out);
	}

	.catalog-head.is-open .wall-line {
		opacity: 1;
		translate: 0 0;
	}

	/* What it is cut to, which is the one thing you need to know about it. */
	.wall-size {
		position: absolute;
		left: var(--space-2xs);
		bottom: var(--space-2xs);
		padding: 0.2em 0.5em;
		border-radius: 100px;
		background: hsl(var(--over-scrim) / 0.55);
		backdrop-filter: blur(6px);
		font-size: 0.58rem;
		letter-spacing: 0.08em;
		font-variant-numeric: tabular-nums;
		color: var(--over-ink);
		opacity: 0;
		transition: opacity var(--dur-fast) var(--ease-out);
	}

	.wall-card:hover .wall-size,
	.wall-card:focus-visible .wall-size {
		opacity: 1;
	}

	/* The number moves aside for it. */
	.wall-card .catalog-n {
		left: auto;
		right: var(--space-2xs);
	}

	.wall-note {
		margin: var(--space-s) 0 0;
		font-size: var(--step--2);
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: color-mix(in oklab, var(--over-ink) 62%, transparent);
	}

	/* A file that is not on offer says what to do instead. */
	.lightbox-download.is-enquiry {
		border-color: color-mix(in oklab, var(--over-ink) 30%, transparent);
		background: none;
		color: color-mix(in oklab, var(--over-ink) 82%, transparent);
	}

	@media (max-width: 60rem) {
		.catalog.is-wall .catalog-card {
			width: clamp(100px, 30vw, 150px);
		}

		.wall-size {
			opacity: 1;
		}
	}
}