/**** DEFAULTS ****/
:root {
	font-family: Inter, sans-serif;
	font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
	font-feature-settings: "dlig", "zero", "ss01", "ss03", "cv01", "cv10";
	--backColor: #e0d7d7;
	--compColor: #fcfbfb;
	--titleColor: #369104;
	--subtitleColor: #bf4b02;
	--textColor: #333333;
	--borderColor: #b6aeae;
	--gap: 1rem;
}
@supports (font-variation-settings: normal) {
	:root { font-family: InterVariable, sans-serif; }
}
* {
	margin: 0;
	padding: 0;
}
body {
	background-color: var(--backColor);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	color: var(--textColor);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.45;
}
p + p {
	margin-top: 1rem;
}
header div, main , aside, footer div {
	margin-left: auto;
	margin-right: auto;
}
header div , aside, footer div {
	max-width: 1280px;
}
header div, main section, aside, footer {
	padding: var(--gap);
}
header, footer {
	background-color: var(--compColor);
}
header {
	border-bottom: 1px dashed var(--borderColor);
}
header div {
	display: grid;
	grid-template: auto / auto 1fr;
	grid-gap: 1rem;
	align-items: end;
}
header h1 {
	color: var(--titleColor);
	font-weight: 500;
	font-size: 2rem;
	line-height: 1.2;
}
main {
	max-width: 960px;
	font-size: 1.1rem;
}
main img {
	width: 100%;
	max-width: 960px;
}
aside {
	font-size: 0.9rem;
}
aside div {
	padding: var(--gap);
	background-color: #ccc;
	border-radius: 6px;
}
aside span {
	display: block;
	text-align: center;
	margin-bottom: 1rem;
}
aside img {
	width: 96px;
}
aside h2 {
	color: var(--subtitleColor);
	font-size: 1.6rem;
	font-weight: 300;
}
aside ul {
	margin-top: 1rem;
	margin-left: 1rem;
	list-style-type: square;
}
aside section + section {
	margin-top: 2rem;
}
footer {
	border-top: 1px dashed var(--borderColor);
}
footer ul, footer ol {
	list-style: none;
	text-align: center;
}
footer ul {
	margin-top: 1rem;
}
footer ul li:nth-child(2) {
	margin-top: 1rem;
}
footer ol{
	margin-top: 2rem;
}
footer ol li {
	display: inline;
}
footer ol img {
	width: 32px;
}
a {
	color: var(--textColor);
	text-decoration: underline;
}

#slider {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
	line-height: 0;
	background-color: #1f1f1f;
	max-width: 1280px;
	margin: 0 auto;
}
#slider img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 2s ease-in-out;
}

@media screen and (min-width: 640px) {
	:root {
		--gap: 2rem;
	}
}
@media screen and (min-width: 960px) {
	main {
		margin-top: 3rem;
	}
}
@media screen and (min-width: 1024px) {
	aside {
		display: grid;
		grid-template: auto auto auto / auto auto;
		grid-gap: 2rem;
	}
	aside section + section {
		margin-top: 0;
	}	
}
@media screen and (min-width: 1280px) {
	aside {
		grid-template: auto auto / auto auto auto;
	}
}