:root {
	--spacing-md: clamp(18px, 3.5vw, 50px);
	--spacing-lg: clamp(22px, 5.5vw, 80px);
	--content-padding-x: clamp(40px, 15vw, 200px);
	--content-padding-x-indented: min(200px, 20vw - 100px);
	--rect-height: clamp(35px, 2.75vw, 41px);
	--rect-width-md: min(25vw, 10rem);
	--rect-width-lg: min(40vw, 15.5rem);
	--color-gray: #DBDBDB;
	--color-yellow: #FFED00;
	--color-magenta: #FF96FF;
	--font-weight: 400;
	--font-family-serif: 'GT Alpina', Georgia, 'Times New Roman', Times, serif;
	--font-family-sans: 'Noto Sans', Helvetica, Arial, sans-serif;
}

html {
	color: black;
	box-sizing: border-box;
	font-size: 16px;
}

body {
	font-family: var(--font-family-serif);
	line-height: 1.3;
	padding: 0;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

* {
	font: inherit;
	font-weight: inherit;
	box-sizing: inherit;
}

p {
	margin: 0 0 1.35em;
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

a {
	text-decoration: none;
	color: inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 1em;
	margin: 0;
	text-wrap: pretty;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

em {
	font-style: italic;
}

nav {
	ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1.5em;
		padding: 0;
		margin: 0;
		list-style: none;
	}
	li {
		margin: 0;
	}
}

.layout__header {
	display: flex;
	justify-content: end;
	padding: var(--spacing-md) var(--spacing-lg);
}

.layout__content {
	display: flex;
	flex-direction: column;

	font-weight: var(--font-weight);
	font-size: 18px;
	line-height: 1.4;

	&::before {
		content: '';
		display: block;
		width: var(--rect-width-lg);
		height: var(--rect-height);
		background-color: var(--color-gray);
	}

	@media screen and (min-width: 500px) {
		font-size: 20px;
		line-height: 1.35;
	}

	h1, h2, h3, h4, h5, h6, p {
		font-weight: var(--font-weight);
	}

	a {
		text-decoration: underline;
	}

	p {
		/* text-indent: 70px; */
	}

	p .indent {
		display: inline-block;
		width: min(10vw, 70px);
	}

	h1 {
		--font-weight: 600;
		font-family: var(--font-family-sans);
		font-size: 28px;
		line-height: 1.15;
		margin-bottom: 1.5em;
		@media screen and (min-width: 500px) {
			--font-weight: 700;
			font-size: 33px;
			line-height: 1.15;
		}
	}

	h1.multilang {
		font-family: var(--font-family-serif);
	}

	h2 {
		font-weight: 500;
		font-size: 28px;
		line-height: 1.12;
		@media screen and (min-width: 500px) {
			--font-weight: 700;
			font-size: 33px;
			line-height: 1.12;
		}
	}

	section {
		align-self: center;
		padding: var(--spacing-lg) var(--content-padding-x) var(--spacing-md);
		@media screen and (min-width: 1000px) {
			margin-left: var(--rect-width-lg);
			margin-right: var(--rect-width-md);
			padding-bottom: 0;
			padding-left: var(--content-padding-x-indented);
			padding-right: var(--content-padding-x-indented);
			max-width: calc(31em + var(--content-padding-x-indented) * 2);
		}
	}
}

.layout__footer {
	font-family: var(--font-family-sans);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.2;
	section {
		padding: 1rem var(--spacing-lg) var(--spacing-md);
	}
	section h2 {
		display: inline-block;
		margin-left: calc(-1 * var(--spacing-lg));
		padding-left: 1em;
		min-width: var(--rect-width-md);
		text-align: right;
	}
	@media screen and (min-width: 900px) {
		section .logo-grid {
			margin-left: calc(-1 * var(--spacing-lg));
			padding-left: calc(var(--rect-width-md) + 3rem);
		}
	}
}

.logo {
	width: clamp(18rem, 30vw, 26.5rem);
	img {
		width: 100%;
	}
}

.logo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 1rem;
	@media screen and (min-width: 500px) {
		grid-template-columns: repeat(auto-fit, minmax(100px, 150px));
		gap: 2.5rem;
	}
	img {
		aspect-ratio: 1.9;
		object-fit: contain;
	}
}

.split {
	&::before,
	&::after {
		content: '';
		display: block;
		width: 100%;
		height: var(--rect-height);
	}
	&::before {
		background: linear-gradient(to left, var(--color-magenta) var(--rect-width-md), transparent 0);
	}
	&::after {
		display: none;
		background: linear-gradient(to right, var(--color-yellow) var(--rect-width-md), transparent 0);
	}
}

.split--layout {
	&::after {
		display: block;
	}
}

.multilang {
	[lang^='sl'] {
		font-family: var(--font-family-sans);
		font-size: 0.9em;
		font-weight: min(700, calc(var(--font-weight, 400) + 100)) !important;
	}
	span[lang] {
		display: inline-block;
	}
}


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 360px) {

/* ====================
	LARGE PHONE
   ==================== */

}

@media only screen and (min-width: 400px) {

/* ====================
	INTERMEDIATE
   ==================== */


}

@media only screen and (min-width: 900px) {

/* ====================
	WIDE
   ==================== */


}

@media only screen and (min-width: 1800px) {

/* ====================
	WIDE
	==================== */

}