@import url(///typ.problemas.se/fonter/lib/hk-grotesk/stylesheet.css);
@import url(///typ.problemas.se/fonter/lib/Alegreya/stylesheet.css);

html {
	background: hsl(22 68% 7%) url(../bilder/background-coffee.jpg) no-repeat center;
	background-size: cover;
	font-family: 'HK Grotesk', serif;
}

body {
	padding-block: 1rem;
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	place-items: center;
}

@media (width <= 768px) {
	body {
		grid-template-columns: 1rem 3fr 1rem;
	}
}

a {
	color: rgb(82, 20, 37);
}

main {
	display: grid;
	grid-column: 2 / -2;
	background: hsl(23 34% 90%  / .7);
	border: 1px solid hsl(23 34% 90%  / .8);
	padding-block-end: clamp(1rem, 3vw, 4rem);
	border-radius: 2rem;
	background-blend-mode: lighten;
	backdrop-filter: blur(4px);
}



header {
	display: grid;
	grid-column: 2 / -2;
	place-items: start;
	margin-inline: clamp(1rem, 3vw, 4rem);
}

h1 {
	font-family: Alegreya, Serif;
	font-weight: normal;
	font-style: italic;
	font-size: 4rem;
	margin-block: 2rem 1rem;
}

header img {
	width: min(30rem, 100%);
	opacity: .7;
	mix-blend-mode: multiply;
}

article {
	grid-column: 2 / -2;
	margin-inline: clamp(1rem, 3vw, 4rem);
	
}

article p {
	max-width: 72ch;
	font-size: 1.25rem;
	line-height: 1.6;
	margin-block: 1em;
	flex: 2 0 0;
}

article .figures {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 1rem;
}

article figure {
	flex: 1 0 0;
	margin: 0
}

article figure:nth-child(2) {
	grid-row: 1 / 3;
	grid-column: 2 / 3;
}

@media (width <= 768px) {
	article .figures {
		grid-template-columns: 1fr;
	}
	article figure:nth-child(2) {
		grid-row: auto;
		grid-column: auto;
	}	
}



article img {
	margin-block-end: .5rem;

	width: 100%;
}

@media (max-width: 768px) {
	article img {
		width: 100%;
		float: none;
		margin-inline: 0;
	}
}

footer {
	display: grid;
		grid-column: 2 / -2;
	clear: both;
	margin-inline: clamp(1rem, 3vw, 4rem);
	margin-block-start: 2rem;
}