.wyc1d7ysf{position:relative;display:block;width:100%;height:100%}.wyc1d7ysf>div{position:absolute;inset:0;display:none}.wyc1d7ysf>div.active{display:block}.wyc1d7ysf>div img{width:100%;height:100%;object-fit:contain}.wyc1d7ysf button{appearance:none;background-color:transparent;border:none;position:absolute;top:50%;transform:translateY(-50%) translateX(0);transition:transform 0.1s;width:3rem}.wyc1d7ysf button.prev{left:0}.wyc1d7ysf button.next{right:0}.wyc1d7ysf button.prev:hover{transform:translateY(-50%) translateX(-0.5rem)}.wyc1d7ysf button.next:hover{transform:translateY(-50%) translateX(0.5rem)}.wyc1d7ysf button.next{right:0}.wyc1d7ysf button.next img{transform:scaleX(-100%)}
/*background*/
	.fixed-bg {
		position: fixed;
		top: 0;
		left: 50%;
		--shift: 0px;
		transform: translatex(calc(-50% + var(--shift)));
		aspect-ratio: 1800/1200;
		height: 100vh;
		height: 100lvh;
		min-width: 100%;
		background-color: white;
	}

	.fixed-bg img {
		position: absolute;
		inset: 0;
		height: 100%;
		min-width: 100%;
		width: auto;
		object-fit: cover;
		object-position: bottom center;
		opacity: 0.7;
	}

	nav {
		z-index: 1;
		width: 100%;
		max-width: 1300px;

		padding: 0 2rem;
	}

	nav a {
		text-decoration: none;
	}

	nav a:hover {
		text-decoration: underline;
	}
	/* page layout */
	.top-nav {
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);

		height: 2rem;
		line-height: 2rem;

		display: flex;
		justify-content: space-between;
	}

	.bottom-nav {
		position: relative;
		margin-inline: auto;
		margin-bottom: 2rem;
	}

	nav .homelink {
		font-weight: 500;
		display: flex;
		column-gap: 0.5ch;
	}
	nav .homelink img {
		width: 1ch;
	}

	.lang-switcher .current-lang {
		font-weight: 500;
	}

	.prevnext {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		/* grid-template-columns: auto auto auto; */
		column-gap: 1rem;
		font-weight: 500;
		font-size: 1.2rem;
		justify-content: center;
		background-color: white;
		padding: 1rem;
	}
	.prevnext a {
		display: flex;
		align-items: center;
		column-gap: 1ch;
		justify-content: space-between;
	}
	.prevnext .prev::before,
	.prevnext .next::after {
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
	}

	.prevnext .prev::before {
		border-width: 1ex 1ex 1ex 0;
		border-color: transparent currentColor transparent transparent;
	}

	.prevnext .next::after {
		border-width: 1ex 0 1ex 1ex;
		border-color: transparent transparent transparent currentColor;
	}

	.prevnext .separator {
		grid-column: 2;
		display: grid;
		place-content: center;
	}
	.prevnext .separator::before {
		content: "";
		display: block;
		width: 0.5ex;
		height: 0.5ex;
		background-color: currentColor;
	}

	main {
		position: relative;
		z-index: 1;

		margin-inline: auto;
		max-width: 1300px;
		padding: 2rem;
		padding-top: 0;
		margin-top: 2rem;

		pointer-events: none;
	}

	main > * {
		pointer-events: all;
	}

	.main-grid {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
		grid-template-areas:
			"photos"
			"title"
			"text"
			"drawings";
		gap: 2rem;

		pointer-events: none;
	}

	.main-grid > * {
		pointer-events: all;
	}

	@media (min-width: 700px) {
		.main-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto auto 1fr;
			grid-template-areas:
				"drawings photos"
				"drawings title"
				"drawings text";
			gap: 2rem;
		}
	}

	.drawings {
		grid-area: drawings;
		height: calc(100vh - 4rem);
		height: calc(100svh - 4rem);
		position: sticky;
		top: 2rem;

		/* background-color: hsla(0, 0%, 100%, 0.3); */
		background-color: hsla(0, 0%, 0%, 0.1);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
	}

	.drawings.fixed {
		position: fixed;
		left: 50%;
		width: calc(100% - 4rem);
		transform: translateX(-50%);
		z-index: -1;

		background-color: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	@media (min-width: 700px) {
		.drawings.fixed {
			position: sticky;
			left: unset;
			width: 100%;
			transform: unset;
		}
	}

	.photos {
		grid-area: photos;
		aspect-ratio: 3/2;
		/*position: sticky;
		top: 2rem;*/
		z-index: 2;

		background-color: hsla(0, 0%, 100%, 0.3);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
	}
	h1 {
		margin: 0;
		color: #fff;
		grid-area: title;
		font-size: 2.4rem;
		font-weight: 700;
		border: 3px solid white;
		padding: 1rem;
		background-color: rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
	}
	.text {
		grid-area: text;
		padding: 1rem;
		align-self: top;

		background-color: hsla(0, 0%, 100%, 0.5);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
	}
	.text h2 {
		margin: 0;
		font-weight: 600;
	}

	.text figure {
		margin: 0;
		margin-bottom: 2rem;
	}

	.text blockquote {
		margin: 1rem 1rem;
	}

	.text blockquote + figcaption {
		margin-left: 2rem;
	}

	.text p {
		margin: 0;
	}
	.text p + p {
		margin-top: 1rem;
	}
	.text.blocks {
		background-color: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		padding: 0;
		pointer-events: none;
	}
	.text.blocks > div,
	.text.blocks > scroll-point > div {
		background-color: hsla(0, 0%, 100%, 0.5);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		padding: 1rem;
		pointer-events: all;
	}
	.text.blocks > * + * {
		margin-top: 1rem;
	}

	.bottom {
		grid-area: bottom;
	}
/* montserrat-200 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 200;
	src: url("/fonts/montserrat-v25-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-200italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 200;
	src: url("/fonts/montserrat-v25-latin-200italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-300 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 300;
	src: url("/fonts/montserrat-v25-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-300italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 300;
	src: url("/fonts/montserrat-v25-latin-300italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400;
	src: url("/fonts/montserrat-v25-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 400;
	src: url("/fonts/montserrat-v25-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 500;
	src: url("/fonts/montserrat-v25-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 500;
	src: url("/fonts/montserrat-v25-latin-500italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-600 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 600;
	src: url("/fonts/montserrat-v25-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-600italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 600;
	src: url("/fonts/montserrat-v25-latin-600italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	src: url("/fonts/montserrat-v25-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-700italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 700;
	src: url("/fonts/montserrat-v25-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

* {
	box-sizing: border-box;
}

html:focus-within {
	scroll-behavior: smooth;
}

:root {
	font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	line-height: 1.4;
}
body {
	margin: 0;
	padding: 0;
	width: 100%;
}

a {
	color: inherit;
}

img,
svg {
	display: block;
	width: 100%;
	height: auto;
}

/* UTILITIES */