/* =global
--------------------------------------------------------------- */
.wrapper {
	width: 90%;
	max-width: 80ch;
	margin: 0 auto;
	padding: min(3em, 10vw) 0;
}
.wrapper > *:last-child {
	margin-bottom: 0;
}
	
/* =header
--------------------------------------------------------------- */
header {
	text-align: center;
	background-color: #1a1a1a;
}
.logo {
	font-size: 1.6rem;
}
.logo svg {
	fill: #EEE;
	display: block;
}

/* =main
--------------------------------------------------------------- */
.lead {
	max-width: 40ch;
	font-size: clamp(2rem, 2rem + .5vw, 2.8rem);
	font-family: var(--font-family-regular);
}

.main__pano > .wrapper {
	padding-bottom: 0;
}

@media only screen and (min-width: 32.5em) { /* 520/16 */
	
	.main__pano {
		height: 50vw;
		max-height: 500px;
		background-image: url(../img/header-bg.jpg);
		background-size: cover;
		background-position: center bottom;
	}

}

/* =footer
--------------------------------------------------------------- */
footer {
	color: #fff;
	background-color: #1a1a1a;
}
footer p {
	margin-bottom: 0.75em;
}
footer a:link,
footer a:visited {
	color: #fff;
	text-decoration: none;
}
footer a::before {
	background-color: rgba(255,255,255,0.5);
}
.mail-icon {
	width: 1em;
	height: 1em;
	margin-bottom: -0.1em;
}

/* =colors
--------------------------------------------------------------- */
main {
	color: #292929;
	background-color: #EEE;
}
body, header, footer {
	color: #EEE;
	fill: #EEE;
	background-color: #398AB9;
}
header {
	background-color: #1C658C;
}