html {
	zfont: 400 clamp(18px, 4.5vw, 26px) 'neue-haas-grotesk-display', sans-serif;
	font: 400 max(18px, 1.67vw) 'neue-haas-grotesk-display', sans-serif;
}
body {
	margin: 2rem;
}
p {
	max-width: 16em;
}

.page-heading {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: -1rem;
}
.page-heading span {
	font-weight: 400;
}
.sample-heading {
	/*font-size: max(1rem, calc( (100vw - 4rem)/7.2 ));
	font-weight: 500;*/
	font-size: max(1rem, calc( (100vw - 4rem)/7.4 ));
	font-weight: 600;
	margin-bottom: 0;
}
a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid;
}
a[href="tel"] {
	border: none;
}

aside {
	max-width: 15em;
}

.grid {
	display: grid;
	margin: 1rem 0 2rem;
	gap: 2rem;
	grid-template-columns: repeat(1, 1fr);
}
figure {
	all: unset;
}
figcaption {
	display: block;
	margin-top: 0.5rem;
	font-size: max(16px, 0.67rem);
	font-weight: 400;
}
figcaption strong {
	font-weight: 500;
}
.image {
	position: relative;
	padding-bottom: 65%;
	overflow: hidden;
	cursor: url('../eyedropper.svg') 2 29, crosshair;
}
.image canvas {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
}
@media(min-width: 600px) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.sample-heading {
		font-size: max(1rem, calc( ((100vw - 6rem)/2)/7.4 ));
	}
}
@media(min-width: 1024px) {
	.grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.sample-heading {
		font-size: max(1rem, calc( ((100vw - 8rem)/3)/7.4 ));
	}
}