:root {
	--vh: 1svh;
	--wh: calc(100 * var(--vh, 1vh));
	--offwhite: #EEE;
	--silver: #BBB;
	--silver-dark: #444;
	--line-height: 1.1;
	--margin: 0.5rem;
	--descender: 0.195;
	--height: calc((var(--wh) - 4 * var(--margin) - 1em * var(--descender) - 1.5em * var(--line-height)) / 2);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
	overflow: hidden;
}

body {
	background-color: white;
	color: var(--silver-dark);
	font-family: "GT Pressura", "Helvetica Neue", Arial, sans-serif;
	font-size: 0.875rem;
	line-height: var(--line-height);
	text-size-adjust: none;
	text-transform: uppercase;
}

main {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	scroll-behavior: smooth;
	scroll-snap-type: y mandatory;
	transition: opacity 0.5s ease-in-out;
}

h1 {
	font-size: inherit;
	font-weight: normal;
}

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

.fadein {
	opacity: 0;
	animation: fadein 0.5s ease-in-out forwards;
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.hidden {
	visibility: hidden;
}

.visually-hidden {
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	position: absolute;
	white-space: nowrap;
}

.muted {
	color: var(--silver);
}

.split {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

.split--ready,
.split--ended,
.split--ended .slidein {
	opacity: 1;
}

.slidein {
	opacity: 0;
}

.split--ready .slidein {
	animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(100%);
	}
	to {
		opacity: 1;
		transform: translateY(0%);
	}
}

.list {
	flex: 1;
	display: flex;
	flex-direction: column;
	list-style: none;
}

.list_item {
	display: grid;
	align-items: start;
	gap: 0 var(--margin);
	grid-template-columns: 1fr 2fr;
}

.list_item--push {
	flex: 1;
}

.list_item--single {
	grid-template-columns: 1fr !important;
}

.list_item:empty::before {
	content: "\00a0";
}

.list_note:empty {
	display: none;
}

.list_note::before {
	content: "\2192\00a0";
}

.list_note + .list_note::before {
	content: "";
}

.navigation,
.labels {
	display: grid;
	gap: var(--margin);
	grid-template-columns: repeat(4, 1fr);
	width: 100%;
	padding: var(--margin) var(--margin) calc(var(--margin) - var(--descender) * 1em);
	overflow: hidden;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10;
}

.labels {
	align-items: start;
	grid-template-rows: 1fr 1fr calc(1.5em * var(--line-height));
	height: 100%;
	pointer-events: none;
}

.label {
	position: relative;
	color: var(--silver);
	font-size: 0.5em;
	cursor: default;
	pointer-events: all;
	transition: color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.label > span {
	--percent: calc(var(--state, 0) * 100%);
	position: absolute;
	top: 0;
	left: 0;
	/* mask-image: linear-gradient(to bottom, transparent 33.333%, black 33.333%, black 66.666%, transparent 66.666%);
	mask-position: 0 var(--percent, 50%);
  	mask-size: 100% 300%;
	transition: mask-position 0.3s ease-in-out; */
	opacity: calc(1 - var(--state, 0) * var(--state, 0));
	transform: translateY(var(--percent));
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#none:not(:checked) ~ .labels > .label[data-row="2"],
#none:not(:checked) ~ .labels > .label[data-row="3"] {
	color: var(--silver-dark);
}

.navigation {
	padding-top: calc(0.5em * var(--line-height));
	color: var(--silver);
}

.navigation > a,
.navigation label {
	cursor: pointer;
	transition: color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.navigation > a:hover,
.navigation > a.active,
.navigation label:hover {
	color: var(--silver-dark);
}

#none:not(:checked) ~ .navigation > a:hover,
#none:not(:checked) ~ .navigation label:hover {
	color: var(--offwhite);
}

#contact:checked ~ .navigation > :not([for="none"]),
#terms:checked ~ .navigation > :not([for="none"]) {
	color: var(--silver-dark);
}

#none:checked ~ .navigation > [for="none"],
#contact:checked ~ .navigation > [for="contact"],
#terms:checked ~ .navigation > [for="terms"] {
	display: none;
}

#contact:checked ~ .navigation > [for="contact"],
#terms:checked ~ .navigation > [for="terms"] {
	pointer-events: none;
}

.navigation_about {
	grid-column: 2;
	grid-row: 1;
	order: 0;
}

.navigation_about.active {
	pointer-events: none;
}

.navigation_index {
	grid-column: 1;
	grid-row: 1;
	order: -1;
}

.navigation_views {
	grid-column: 1;
	grid-row: 1;
	order: -1;
	display: flex;
}

.navigation_about:not(.active) + .navigation_index:not(.active),
.navigation_about.active ~ .navigation_views,
.navigation_index.active ~ .navigation_views {
	display: none;
}

.navigation_views > label + label {
	margin-left: var(--margin);
}

#project:checked ~ .navigation > .navigation_views > [for="project"],
#material:checked ~ .navigation > .navigation_views > [for="material"],
#process:checked ~ .navigation > .navigation_views > [for="process"] {
	color: var(--silver-dark);
}

.overlay {
	width: 100%;
	height: calc(var(--height) + 1.5em * var(--line-height) + 2 * var(--margin) + 1em * var(--descender));
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10;
	transform: translate3d(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.95);
	color: var(--offwhite);
	transition: transform 1s cubic-bezier(.86,0,.07,1);
}

#none:checked ~ .overlay {
	transform: translate3d(0, 100%, 0);
}

.overlay > label {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 100%;
	left: 0;
}

#none:checked ~ .overlay > label {
	visibility: hidden;
}

.contact,
.terms {
	display: grid;
	align-items: start;
	gap: var(--margin);
	grid-template-rows: minmax(min-content, 1fr);
	width: 100%;
	height: 100%;
	padding: calc(0.5em * var(--line-height) + 1em * var(--descender)) var(--margin) 0;
	overflow: auto;
	scrollbar-width: none;
	position: absolute;
	top: 0;
	left: 0;
	mask-image: linear-gradient(
		to bottom,
		transparent,
		transparent calc(0.5em * var(--line-height) + 1em * var(--descender)),
		black calc(0.5em * var(--line-height) + 1em * var(--descender)),
		black calc(100% - var(--margin) - 1.5em * var(--line-height) + 0.5em * var(--descender)),
		transparent calc(100% - var(--margin) - 1.5em * var(--line-height) + 0.5em * var(--descender))
	);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease-in-out, visibility 0s 0.5s;
}

.contact::-webkit-scrollbar,
.terms::-webkit-scrollbar {
	display: none;
}

.contact {
	grid-template-columns: 1fr 1fr;
}

#contact:checked ~ .overlay > .contact,
#terms:checked ~ .overlay > .terms {
	opacity: 1;
	visibility: visible;
	transition-delay: 0.5s, 0s;
}

.contact_contact,
.contact_form,
.terms_terms,
.terms_colophon {
	min-height: calc(var(--height) + 1em * var(--line-height) + 2 * var(--margin));
	padding-bottom: calc(2 * var(--margin) + 1.5em * var(--line-height) - 2em * var(--descender));
	position: sticky;
	top: 0;
	color: var(--silver-dark);
	background-color: transparent;
	transition:
		background-color 0.5s ease-in-out,
		color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact_contact:hover,
.contact_form:hover,
.contact_form:focus-within,
.terms_terms:hover,
.terms_colophon:hover {
	background-color: #3B3936;
	color: var(--offwhite);
}

.contact_form {
	display: flex;
	flex-direction: column;
}

.contact_contact > div {
	display: grid;
	align-content: start;
	grid-template-columns: 1fr 1fr;
	gap: var(--margin);
}

.FormBuilder,
.Inputfields {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.Inputfield {
	display: grid;
}

.Inputfield_message {
	flex: 1;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	margin: calc(1em * var(--line-height)) 0;
}

.Inputfield_consent {
	margin-bottom: calc(1em * (var(--line-height) - var(--descender)));
	opacity: 0.25;
	transition: opacity 0.5s ease-in-out;
}

.Inputfield_consent:hover {
	opacity: 1;
}

.Inputfield_consent input {
	display: none;
}

.Inputfield_consent label > span::before {
	content: "";
	aspect-ratio: 1 / 1;
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: var(--margin);
	border: 1px solid;
}

.Inputfield_consent label > input:checked + span::before {
	background-color: currentColor;
}

.InputfieldHeader {
	display: none;
}

.InputfieldContent > button,
.InputfieldContent > input,
.InputfieldContent > textarea {
	appearance: none;
	width: 100%;
	background: none;
	border: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	text-transform: inherit;
	opacity: 0.25;
	transition: opacity 0.5s ease-in-out;
}

.InputfieldContent > button:hover,
.InputfieldContent > button:focus,
.InputfieldContent > input:hover,
.InputfieldContent > input:focus,
.InputfieldContent > textarea:hover,
.InputfieldContent > textarea:focus {
	opacity: 1;
	outline: none;
}

.InputfieldContent > button {
	width: auto;
	cursor: pointer;
}

.InputfieldContent > input {
	height: calc(1em * var(--line-height) - 1px);
	/* border-bottom: 1px solid; */
}

.InputfieldContent > textarea {
	height: 100%;
	padding: calc(0.5em * (1 - var(--descender))) 0.5em;
	border: 1px solid;
}

.terms {
	grid-template-columns: repeat(4, 1fr);
}

.terms_terms {
	grid-column: span 3;
}

.terms > div {
	display: flex;
	flex-direction: column;
}

.terms_terms > .list > .list_item {
	grid-template-columns: repeat(3, 1fr);
}

.terms_terms > .list > .list_item + .list_item {
	margin-top: calc(1em * var(--line-height));
}

.terms_terms > .list > .list_item > :last-child {
	grid-column: span 2;
}

.projects_cache,
.about_cache,
.project_cache {
	width: 100%;
	height: calc(var(--margin) + 1.5em * var(--line-height));
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1;
	background-color: white;
}

.about_cache,
.project_cache {
	display: none;
}

.projects {
	display: grid;
	gap: calc(var(--margin) + 0.5em * var(--line-height)) var(--margin);
	grid-template-columns: repeat(4, 1fr);
	width: 100vw;
	padding: calc(var(--margin) + 0.5em * var(--line-height)) var(--margin) 0;
}

.projects::after {
	content: "";
	grid-column: 1 / -1;
	display: block;
	height: calc(1em * var(--line-height) + var(--margin) - 0.5em * var(--descender) - 1px);
}

.projects_title {
	position: relative;
	z-index: 1;
}

.projects_project {
	width: 100%;
	height: calc(0.5 * var(--wh) - 2 * var(--margin) - 1.25em * var(--line-height) + 0.5em * var(--descender));
	scroll-snap-align: start;
	scroll-margin-top: calc(var(--margin) + 0.5em * var(--line-height));
	position: relative;
	transition: opacity 0.5s ease-in-out;
}

.projects_thumbnail {
	display: block;
	width: 100%;
	height: calc(100% - 1em * var(--line-height));
	position: absolute;
	top: calc(1em * var(--line-height));
	left: 0;
	object-fit: contain;
	object-position: left top !important;
	transition: opacity 0.5s ease-in-out 0.5s;
}

#project:checked ~ main > .projects > .projects_project > .projects_thumbnail:not(.projects_thumbnail--project),
#material:checked ~ main > .projects > .projects_project > .projects_thumbnail:not(.projects_thumbnail--material),
#process:checked ~ main > .projects > .projects_project > .projects_thumbnail:not(.projects_thumbnail--process) {
	opacity: 0;
	transition-delay: 0s;
}

.about,
.project {
	display: grid;
	align-items: start;
	gap: 0 var(--margin);
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr 1fr calc(1.5em * var(--line-height));
	height: 100%;
	padding: var(--margin) var(--margin) calc(var(--margin) - var(--descender) * 1em);
	overflow: hidden;
}

.about_title,
.project_title {
	padding-top: calc(0.5em * var(--line-height));
}

.about_about,
.project_about {
	height: 100%;
	padding-top: calc(0.5em * var(--line-height));
	overflow: auto;
	scrollbar-width: none;
	mask-image: linear-gradient(
		to bottom,
		transparent calc(0.5em * var(--line-height) + 0.5em * var(--descender)),
		black calc(0.5em * var(--line-height) + 0.5em * var(--descender)),
		black calc(100% - 1em * var(--descender)),
		transparent calc(100% - 1em * var(--descender))
	);
}

.about_about::-webkit-scrollbar,
.project_about::-webkit-scrollbar {
	display: none;
}

.about_about {
	grid-column: 2 / span 2;
	grid-row: 1;
}

.about_about::after {
	content: "";
	display: block;
	height: calc(var(--margin) - 1em * var(--descender));
}

.about_title a,
.project_title a,
.about_about a,
.project_about a {
	color: var(--silver);
	transition: color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.about_title a:hover,
.project_title a:hover,
.about_about a:hover,
.project_about a:hover {
	color: var(--silver-dark);
}

.about_image {
	display: block;
	grid-column: 4;
	max-width: 100%;
	height: 100%;
	padding-bottom: var(--margin);
	overflow: hidden;
	object-fit: cover;
}

.about_informations {
	display: grid;
	align-items: start;
	gap: var(--margin);
	grid-column: span 4;
	grid-template-columns: repeat(4, 1fr);
	height: 100%;
	padding-top: calc(0.5em * var(--line-height));
	overflow: auto;
	scrollbar-width: none;
	mask-image: linear-gradient(
		to bottom,
		transparent calc(0.5em * var(--line-height) + 0.5em * var(--descender)),
		black calc(0.5em * var(--line-height) + 0.5em * var(--descender)),
		black calc(100% - 1em * var(--descender)),
		transparent calc(100% - 1em * var(--descender))
	);
}

.about_informations::-webkit-scrollbar {
	display: none;
}

.about_informations > div {
	position: sticky;
	top: 0;
}

.about_informations > ::after {
	content: "";
	display: block;
	height: calc(var(--margin) - 1em * var(--descender));
}

.about_informations .list_item {
	grid-template-columns: auto 1fr;
}

.about_clients .list_item {
	grid-template-columns: 1fr;
}

.about_clients .list_item > a[href],
.about_clients .list_item > a[href] > span {
	transition: color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.about_clients .list_item > a[href]:hover {
	color: var(--silver);
}

.about_clients .list_item > a[href]:hover > span {
	color: var(--silver-dark);
}

.project_title {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: auto;
	scrollbar-width: none;
	mask-image: linear-gradient(
		to bottom,
		transparent calc(0.5em * var(--line-height) + 0.5em * var(--descender)),
		black calc(0.5em * var(--line-height) + 0.5em * var(--descender)),
		black calc(100% - 1em * var(--descender)),
		transparent calc(100% - 1em * var(--descender))
	);
}

.project_title > a {
	opacity: 0;
	visibility: hidden;
	transform: translateY(100%);
	transition:
		color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s;
}

.project_title:hover > a {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.project_title:not(:hover) > a {
	transition-delay: 0s, 0.4s, 0s, 0.4s !important;
}

.project_gallery {
	width: calc(50% - 1.5 * var(--margin));
	overflow: hidden;
	position: fixed;
	top: var(--margin);
	right: var(--margin);
	bottom: calc(var(--margin) - 1px);
}

.project_gallery > .slideshow {
	width: 100%;
	height: 100%;
}

.project_context,
.project_technique,
.project_acknowledgement,
.project_copyright {
	padding-top: calc(0.5em * var(--line-height));
}

.project_technique,
.project_acknowledgement,
.project_copyright {
	pointer-events: none;
	mix-blend-mode: difference;
	color: var(--silver);
}

.project_technique .muted {
	color: var(--silver-dark);
}

.project_gallery .slideshow_page {
	mix-blend-mode: difference;
	color: var(--silver-dark);
}

.project_gallery .slideshow_page--current {
	color: var(--silver);
}

.project_technique {
	grid-column: 4;
	max-height: 100%;
	overflow: auto;
	scrollbar-width: none;
	z-index: 1;
	mask-image: linear-gradient(
		to bottom,
		transparent calc(0.5em * var(--line-height) + 0.5em * var(--descender)),
		black calc(0.5em * var(--line-height) + 0.5em * var(--descender)),
		black calc(100% - 1em * var(--descender)),
		transparent calc(100% - 1em * var(--descender))
	);
}

.project_technique::-webkit-scrollbar {
	display: none;
}

.project_about {
	grid-column: 1 / span 2;
	grid-row: 2;
}

.project_technique::after,
.project_about::after {
	content: "";
	display: block;
	height: calc(var(--margin) - 1em * var(--descender));
}

.project_acknowledgement {
	grid-column: 3;
	grid-row: 2;
	z-index: 1;
}

.project_copyright {
	grid-column: 4;
	grid-row: 2;
	z-index: 1;
}

.project_projects {
	display: none;
}

@media (max-width: 1024px) {
	.labels,
	.projects {
		grid-template-columns: repeat(2, 1fr);
	}

	.label {
		grid-row: 3;
	}

	.label:not([data-col="1"][data-row="3"]) {
		display: none;
	}

	.navigation {
		display: flex;
		gap: 0;
	}

	.navigation > *:not(:last-child)::after {
		content: ",\00a0";
		color: var(--silver) !important;
	}

	#terms:checked ~ .navigation > [for="none"]::after {
		display: none;
	}

	.navigation_views > label + label {
		margin-left: 0;
	}

	.navigation_views > label:not(:last-child)::after {
		content: "\00a0/\00a0";
		color: var(--silver) !important;
	}

	.projects_project::before {
		content: attr(data-label);
		position: absolute;
		bottom: 100%;
		left: 0;
		color: var(--silver);
		font-size: 0.5em;
	}

	.about_cache,
	.project_cache {
		display: block;
	}

	.about,
	.project {
		align-content: start;
		gap: calc(var(--margin) - 1em * var(--descender));
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		height: auto;
	}

	.about::after,
	.project::after {
		content: "";
		grid-column: 1 / -1;
		display: block;
		height: calc(1em * var(--line-height) + 2 * var(--margin) - 0.5em * var(--descender) - 1px);
	}

	.about_title {
		position: relative;
	}

	.about_image {
		grid-column: 1;
		height: calc(0.5 * var(--wh) - 2 * var(--margin) - 1.25em * var(--line-height) + 0.5em * var(--descender));
		padding-bottom: 0;
	}

	.about_about,
	.about_informations {
		align-content: start;
		grid-column: 1;
		margin-top: calc(5 * var(--margin));
		mask-image: none;
	}

	.about_about {
		grid-row: auto;
		position: relative;
	}

	.about_informations {
		grid-template-columns: repeat(2, 1fr);
		padding-top: 0;
	}

	.about_cv,
	.about_distinctions,
	.about_exhibitions,
	.about_clients {
		padding-top: calc(0.5em * var(--line-height));
	}

	.about_cv,
	.about_distinctions,
	.about_exhibitions {
		margin-bottom: calc(5 * var(--margin));
	}

	.project > * {
		grid-column: 1;
		grid-row: initial;
		position: relative;
		mask-image: none;
	}

	.project > *:empty {
		display: none;
	}

	.project_title {
		height: calc(1.5em * var(--line-height));
		overflow: visible;
		mask-image: none;
	}

	.project_title > a {
		display: none;
	}

	.project_gallery {
		width: 100%;
		height: calc(0.5 * var(--wh) - 2 * var(--margin) - 0.25em * var(--line-height) + 0.5em * var(--descender));
		margin-bottom: calc(5 * var(--margin));
		position: static;
	}

	.project_gallery > .slideshow {
		padding-bottom: calc(1em * var(--line-height));
	}

	.project_gallery > .slideshow > .slideshow_slides {
		height: calc(100% - var(--margin) - 1.5em * var(--line-height));
	}

	.project_gallery > .slideshow > .slideshow_footer {
		position: relative;
		justify-content: flex-start;
		padding-top: var(--margin);
	}

	.project_gallery > .slideshow > .slideshow_footer::before {
		content: "Image";
		position: absolute;
		top: 0;
		left: 0;
		color: var(--silver);
		font-size: 0.5em;
	}

	.project_gallery ~ *:not(:empty) ~ .project_about,
	.project_copyright {
		margin-top: calc(5 * var(--margin));
	}

	.project_technique,
	.project_acknowledgement,
	.project_copyright {
		color: var(--silver-dark);
		mix-blend-mode: normal;
	}
	
	.project_technique .muted {
		color: var(--silver);
	}

	.project_gallery .slideshow_page {
		color: var(--silver);
		mix-blend-mode: normal;
	}

	.project_gallery .slideshow_page--current {
		color: var(--silver-dark);
	}

	.project_context,
	.project_acknowledgement {
		margin-bottom: calc(1em * var(--line-height) - (var(--margin) - 1em * var(--descender)));
	}

	.project_projects {
		display: grid;
		gap: 0 var(--margin);
		grid-template-columns: repeat(2, 1fr);
		padding-top: calc(0.5em * var(--line-height));
		margin-top: calc(5 * var(--margin));
		position: relative;
	}

	.project_projects > .projects_project {
		height: auto;
	}

	.project_projects > .projects_project > .projects_thumbnail {
		height: auto;
		position: static;
	}

	.overlay {
		height: auto;
		top: 0;
	}

	.contact,
	.terms {
		align-content: start;
		grid-template-columns: 1fr;
	}

	.contact_contact,
	.contact_form,
	.terms_terms,
	.terms_colophon {
		min-height: calc(0.5 * var(--wh) - 1.25em * var(--line-height) + 0.5em * var(--descender) + var(--margin));
		padding-top: calc(0.5em * var(--line-height));
		padding-bottom: 0;
		position: relative;
		color: var(--silver);
	}

	.contact_contact:hover,
	.contact_form:hover,
	.contact_form:focus-within,
	.terms_terms:hover,
	.terms_colophon:hover {
		background-color: transparent;
		color: var(--silver);
	}

	.contact_form,
	.terms_colophon {
		padding-bottom: calc(2 * var(--margin) + 1.5em * var(--line-height) - 2em * var(--descender));
	}

	.contact_contact > div {
		grid-template-columns: 1fr;
		position: sticky;
		top: 0;
	}

	.contact_contact .list {
		margin-top: calc(1em * var(--line-height) - var(--margin));
	}

	.list_item {
		grid-template-columns: 1fr 1fr;
	}

	.Inputfield_consent,
	.InputfieldContent > button,
	.InputfieldContent > input,
	.InputfieldContent > textarea {
		opacity: 1;
	}

	.terms_terms {
		grid-column: 1;
	}

	.terms_terms > .list > .list_item {
		grid-template-columns: 1fr;
	}

	.terms_terms > .list > .list_item--push {
		display: none;
	}

	.terms_terms > .list > .list_item > :first-child {
		color: var(--silver-dark);
	}

	.terms_terms > .list > .list_item > :last-child {
		grid-column: 1;
	}

	.about_title::before,
	.about_about::before,
	.about_cv::before,
	.about_distinctions::before,
	.about_exhibitions::before,
	.about_clients::before,
	.project_title::before,
	.project_context::before,
	.project_acknowledgement::before,
	.project_technique::before,
	.project_about::before,
	.project_copyright::before,
	.project_projects::before,
	.contact_contact::before,
	.contact_form::before,
	.terms_terms::before,
	.terms_colophon::before {
		content: attr(data-label);
		position: absolute;
		top: 0;
		left: 0;
		color: var(--silver);
		font-size: 0.5em;
	}

	.contact_contact::before,
	.contact_form::before,
	.terms_terms::before,
	.terms_colophon::before {
		color: var(--silver-dark);
	}

	.about_about::after,
	.about_informations > ::after,
	.project_technique::after,
	.project_about::after,
	.project_projects > .projects_project::before {
		display: none;
	}
}

@media (max-width: 480px) {
	.navigation_about:not(.active) + .navigation_index:not(.active) {
		display: block;
		color: black;
	}

	.navigation_index > span {
		display: none;
	}

	.navigation_views {
		display: none;
	}

	/* .projects_project {
		height: auto;
		max-height: calc(0.5 * var(--wh) - 2 * var(--margin) - 1.25em * var(--line-height) + 0.5em * var(--descender));
	} */

	/* .projects_thumbnail {
		position: static;
	} */

	#project:checked ~ main > .projects > .projects_project > .projects_thumbnail:not(.projects_thumbnail--project),
	#material:checked ~ main > .projects > .projects_project > .projects_thumbnail:not(.projects_thumbnail--material),
	#process:checked ~ main > .projects > .projects_project > .projects_thumbnail:not(.projects_thumbnail--process) {
		display: none;
	}

	.about_informations {
		grid-template-columns: 1fr;
	}

	.list_item {
		grid-template-columns: 1fr 2fr;
	}
}