* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding: 1vh clamp(1rem, 5vw, 3rem) 1rem;
	font-family: system-ui, sans-serif;
	line-height: 1.5;
}

body > * {
	width: min(100%, 720px);
	margin-left: auto;
	margin-right: auto;
}

footer {
	margin-top: auto;
	padding-top: max(8vh, 3rem);
}

footer p {
	border-top: 1px solid #ccc;
	padding-top: 0.25em;
	font-size: 0.9rem;
	/* color: #767676; */
}

/* Header ////////////////////////////////////////////////////*/
.logo-container {
	display: grid;
	place-content: center;
	margin-top: 1rem;
	margin-bottom: 1rem;
}
svg {
	fill: currentColor;
	width: 120px;
	min-height: 0px;
}
header h1,
header h2,
header p,
header a {
	line-height: 1.35rem;
	text-align: center;
	/* margin-inline: auto; */
}
header h1 {
	/* color: color-mix(in srgb, midnightblue 100%, currentColor 10%); */
	color: currentColor;
	font-size: 2rem;
}
header h2 {
	color: #b5b5b5;
	font-size: 1.5rem;
	margin-top: 0;
	padding: 0.5rem 2rem;
}
header p {
	margin: 1rem auto;
}

.img-container {
	display: grid;
	grid-template-areas: "stack";
	margin: 1.5rem auto;
}
.img-container > * {
	grid-area: stack;
}
.img-container p {
	background-color: midnightblue;
	color: white;
	font-size: 1.5em;
	line-height: 1.5rem;
	padding: 0.5rem 2rem;
	margin: 0 auto auto auto;
}
.img-container img {
	width: 100%;
}
/* Cards ///////////////////////////////////////////////////////*/
.smol-css-grid {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.smol-card-component {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	box-shadow: 0 0 0.5rem hsl(0 0% 0% / 35%);
	border-radius: 0.5rem;
	background-color: color-mix(in srgb, grey 5%, currentColor 5%);
}

.smol-card-component > img {
	object-fit: cover;
	aspect-ratio: 4/3;
	width: 100%;
}

.smol-card-component > img:first-child {
	border-radius: 0.5rem 0.5rem 0 0;
}

.smol-card-component > img:last-child {
	border-radius: 0 0 0.5rem 0.5rem;
	margin-top: auto;
}

.smol-card-component > :not(img) {
	margin-left: 1rem;
	margin-right: 1rem;

	/* Prevent typography "orphans" */
	text-wrap: pretty;
}

.smol-card-component > :not(img):first-child {
	margin-top: 1rem;
}

/* Enhanced `:not()` accepts a selector list,
but as a fallback you can chain `:not()` instead */
.smol-card-component > :last-of-type:not(img, h2, h3, h4) {
	margin-bottom: 1rem;
}

.smol-card-component > :not(h2, h3, h4) {
	font-size: 0.9rem;
}

.smol-card-component > a {
	align-self: start;
}

:is(h1, h2, h3) {
	line-height: 1.2;
}

#google-map {
	padding: 0;
	margin: 0;
	object-fit: cover;
	aspect-ratio: 4/3;
	width: 100%;
}
/* :is(h2, h3):not(:first-child) {
	margin-top: 2em;
} */