/**
 * Still Water Notes (sw-notes): Figma "Local guide · Notes" at 1440, 834 and 390.
 *
 * White. Padding 80 / 56, and 40 / 56 on phones. The title (h1 56/64, 36/44 on phones), then,
 * 48 under it, three cards 24 apart: 384 / 240.67 wide at 1440 / 834, a scroll row of 300 wide
 * cards on phones. Card: photo (4:5, radius 12), title (h3 28/36) 16 under it, then 16 under
 * that the text (16/24 muted) or the link (14/20, underlined, 44 tall).
 */

.sw-notes.sw-pad {
	--sw-heading-gap: 48px;
}

.sw-notes__grid {
	display: grid;
	grid-template-columns: repeat(var(--sw-notes-cols, 3), minmax(0, 1fr));
	gap: 24px;
}

.sw-notes__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.sw-notes__photo {
	align-self: stretch;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--sw-radius);
	background: var(--sw-c-line);
}

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

.sw .sw-notes__link {
	font-size: var(--sw-fs-small);
	line-height: var(--sw-lh-small);
	font-weight: 400;
}

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

	/* A row that scrolls sideways, bleeding to the screen edge (Figma 390: 300 wide cards). */
	.sw-notes__grid {
		display: flex;
		gap: 24px;
		margin-inline: calc(-1 * var(--sw-gutter));
		padding-inline: var(--sw-gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--sw-gutter);
		scrollbar-width: none;
	}

	.sw-notes__grid::-webkit-scrollbar {
		display: none;
	}

	.sw-notes__card {
		flex: none;
		width: 300px;
		scroll-snap-align: start;
	}
}