/*
	display-window — the "lift" treatment. Shadow + border + radius.
	Everything window-shaped uses this. macOS-screenshot convention applied
	via CSS so the source images can stay clean (cropped to content only).
*/

.display-window {
	--browser-border:  #a8acb1;

	border: 1px solid var(--browser-border);
	border-radius: 0.5rem;
	overflow: hidden;
	background: #ffffff;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.06),
		0 8px 24px rgba(0, 0, 0, 0.12),
		0 24px 48px rgba(0, 0, 0, 0.08);

	.viewport {
		img,
		picture,
		svg {
			display: block;
			width: 100%;
		}
	}
}