/**
 * Still Water Facts (sw-facts): Figma "At a glance" of the Local guide at 1440, 834 and 390.
 *
 * White. Padding 80 / 56, and 56 on phones too. The label (12/16 muted) and, 16 under it, the
 * title (h3 28/36; h2 36/44 on phones, as drawn); 48 under that the photo (480 / 400 / 300 high,
 * square corners); 48 under that four figures 24 apart (4 / 2 / 1 per row), each under a 1px
 * line: the figure (h3 28/36) with its label (14/20 muted) 8 under it; 48 under those the
 * sources (14/20 muted). In the markup the label comes first, for screen readers.
 */

.sw-facts__head .sw-eyebrow {
	margin-bottom: 16px;
}

.sw-facts__title {
	margin: 0;
	color: var(--sw-heading);
	font-family: var(--sw-serif);
	font-size: var(--sw-fs-h3);
	line-height: var(--sw-lh-h3);
	font-weight: 400;
}

.sw-facts__photo {
	height: 480px;
	margin-top: 48px;
	overflow: hidden;
	background: var(--sw-c-line);
}

.sw .sw-facts__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.sw-facts__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 48px 0 0;
}

/* Figure first on screen, label under it. */
.sw-facts__fact {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 8px;
}

.sw .sw-facts__value {
	margin: 0;
}

.sw-facts__sources {
	margin-top: 48px;
}

@media (max-width: 1024px) {
	.sw-facts__photo {
		height: 400px;
	}

	.sw-facts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.sw-facts.sw-pad {
		padding-top: var(--sw-pad-t, 56px);
		padding-bottom: var(--sw-pad-b, 56px);
	}

	.sw-facts__title {
		font-size: var(--sw-fs-h2);
		line-height: var(--sw-lh-h2);
	}

	.sw-facts__photo {
		height: 300px;
	}

	.sw-facts__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}