.page-header {
	padding-top: calc(4rem + var(--header-height));
	margin-bottom: calc(var(--wave-height) / 2);
	max-width: 100%;
	overflow: hidden;
	background-color: #F9FAE0;
	color: #fff
}
.page-header[data-bg=seafoam] {
	background-color: #573F1C;
	color: #fff
}
.page-header[data-bg=serenade] {
	background-color: #573F1C;
	color: #fff
}
.page-header[data-bg=serenade] .page-header__paragraph {
	color: #707070
}
.page-header__layout {
	padding-bottom: 4rem
}
@media (min-width: 48em) {
	.page-header__layout {
		align-content: center;
		display: grid;
		grid-template-columns: 48% 5% 47%
	}
}
@media (min-width: 48em) {
	.page-header__layout.no-image {
		grid-template-columns: 100%
	}
}
.page-header__layout .c-button {
	margin-top: 4rem
}
@media (min-width: 64em) {
	.page-header__active-filters {
		display: none
	}
}
.page-header__text {
	align-self: center;
	grid-column: 1;
	grid-row: 1;
	margin-bottom: 3rem
}
@media (min-width: 48em) {
	.page-header__text {
		margin-bottom: 0
	}
}
.page-header__overline {
	font-size: 1.2rem;
	font-weight: 900;
	letter-spacing: .15em;
	color: #573F1C;
	margin-bottom: 1rem;
	text-transform: uppercase
}
.page-header__title {
    font-family: 'Nunito', sans-serif;
    font-weight: 1000;
	font-size: clamp(2rem, 4.6224961479vw + 1.2665639445rem, 4rem);
	letter-spacing: normal;
	color: #573F1C;
	line-height: 1;
	margin-bottom: 2rem;
	text-transform: uppercase
}
@media (min-width: 48em) {
	.page-header__title {
		font-size: 2rem;
		letter-spacing: .05em;
		margin-bottom: 3rem
	}
}
@media (min-width: 64em) {
	.page-header__title {
		font-size: 4rem
	}
}
.page-header__title h1{
    line-height: 1.2
}

.page-header__subtitle{
    font-family: 'Zen Maru Gothic', serif;
    font-size: clamp(1.5rem, 1.408rem + 0.402vw, 2.143rem);
    margin-top: 2rem;
    color: #573F1C;
    font-weight: bold
}

.page-header__paragraph {
	font-size: 2.5rem;
	letter-spacing: -.02px
}
.page-header__image {
	width: 100%;
	position: relative;
	grid-column: 2/span 2;
	grid-row: 1
}
.page-header__image:before {
	content: "";
	display: block;
	padding-top: 66.6666666667%
}
.page-header__image>img {
	bottom: 0;
	height: 100%;
	left: 0;
	object-fit: contain;
	object-position: center;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	border-radius: 1.5rem
}
.page-header__image img {
	transform: scale(1.25)
}
@media (min-width: 48em) {
	.page-header__image img {
		transform-origin: 80% center
	}
}