@font-face {
  font-family: 'MP Alfa';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./font/mp_alfaslabone.woff2) format(woff2);
  unicode-range: U+0, U+D, U+20-7E, U+A0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: 'MP Calistoga';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./font/mp_calistoga.woff2) format(woff2);
  unicode-range: U+D, U+20-7E, U+A0-AC, U+AE-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'MP Bricolage';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./font/mp_bricolagegrotesque.woff2) format(woff2);
  unicode-range: U+20-7E, U+A0-A3, U+A5-AC, U+AE-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212;
}

:root {
		--clr-main: #f5ebde;
		--clr-bg: #ff3131;
		--fnt-blocky: 'Alfa Slab One', 'MP Alfa', serif;
		--fnt-pretty: 'Calistoga', 'MP Calistoga', serif;
		--fnt-body: 'Bricolage Grotesque', 'MP Bricolage', sans-serif;
}

body {
		background-color: var(--clr-bg);
		color: var(--clr-main);
}

body > hgroup {
		width: 50rem;
		margin: 10rem auto;
		h1 {
				font-size: 8rem;
				line-height: 1em;
				border-bottom: 0.4rem solid var(--clr-main);
				margin-bottom: 3rem;
		}
		p {
				font-family: var(--fnt-pretty);
				font-size: 3rem;
		}
}

h1,
h2 {
		text-transform: uppercase;
		font-family: var(--fnt-blocky);
		font-weight: 300;
}
article {
		width: 50rem;
		margin-inline: auto;
}

article hgroup {
		h2 {
				font-size: 3.5rem;
				border-bottom: 0.3rem solid var(--clr-main);
				display: inline-block;
				margin-bottom: 0.5rem;
		}
		p {
				font-family: var(--fnt-pretty);
				font-size: 1.7rem;
		}
}

section {
		margin: 2rem 0 3rem;
}

section h3 {
		font-size: 2.5rem;
		font-family: var(--fnt-pretty);
		font-weight: 100;
		margin: 0 0 0.5rem;
}
section p {
		font-family: var(--fnt-body);
		font-size: 1.5rem;
		margin: 0;
}

section img {
		width: 90%;
		filter: invert(97%) sepia(7%) saturate(686%) hue-rotate(319deg) brightness(100%) contrast(93%);
}

section {
		display: grid;
		grid-template-columns: 0.6fr 1.4fr;
		grid-template-rows: 0.2fr 1.8fr;
		gap: 0px 1rem;
		grid-template-areas:
				"image title"
				"image text";
}
section img {
		grid-area: image;
}
section h3 {
		grid-area: title;
}
section p {
		grid-area: text;
}

@media (width < 50rem) {
		body > hgroup {
				width: calc(100% - 2rem);
				margin: 10rem 1rem 2rem;
				min-height: 80vh;
				h1 {
						font-size: 6rem;
						line-height: 1em;
						margin-bottom: 2rem;
				}
				p {
						font-size: 2rem;
				}
		}
		article {
				width: calc(100% - 2rem);
				margin-inline: 1rem;
		}
		article hgroup {
				h2 {
						font-size: 1.6rem;
				}
				p {
						font-size: 1.4rem;
				}
		}
		section h3 {
				display: block;
				font-size: 1.8rem;
				text-align: center;
		}
		section p {
				display: block;
				font-size: 1.2rem;
		}
		section img {
				display: block;
				width: 40%;
				margin: 3rem auto 1rem;
		}
		section {
				display: block;
		}
}