/*====================
FONTS
==================== */

@font-face {
	font-family: 'newsreader-webod';
	src: url("../fonts/Newsreader16pt-Regular-fixed.840dd90c5a17.woff2") format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	size-adjust: 110%;
}

@font-face {
	font-family: 'newsreader-webod';
	src: url("../fonts/Newsreader16pt-Italic-fixed.eb4d6bdd65d0.woff2") format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	size-adjust: 110%;
}

@font-face {
	font-family: 'newsreader-webod';
	src: url("../fonts/Newsreader16pt-Bold-fixed.5fe464797885.woff2") format('woff2');
	font-weight: 700;
	font-display: swap;
	size-adjust: 110%;
}

@font-face {
	font-family: 'sourceserif4smtext-webod';
	src: url("../fonts/SourceSerif4Subhead-Regular.ttf.22578681ed0e.woff2") format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'sourceserif4smtext-webod';
	src: url("../fonts/SourceSerif4Subhead-It.ttf.56aa20d448c0.woff2") format('woff2');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'sourceserif4smtext-webod';
	src: url("../fonts/SourceSerif4SmText-Regular.ttf.4a048af5ee51.woff2") format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'sourceserif4smtext-webod';
	src: url("../fonts/SourceSerif4SmText-It.ttf.f182aef98dab.woff2") format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'sourceserif4smtext-webod';
	src: url("../fonts/SourceSerif4SmText-Semibold.ttf.4cabbc1dd4a0.woff2") format('woff2');
	font-weight: 700;
	font-display: swap;
}



@font-face {
	font-family: 'tasaorbiter-webod';
	src: url("../fonts/TASAOrbiter-Regular.321a3c7cd5eb.woff2") format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'tasaorbiter-webod';
	src: url("../fonts/TASAOrbiter-Bold.501ac250c5e1.woff2") format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}



@font-face {
	font-family: 'texgyreheros-webod';
	src: url("../fonts/TeXGyreHeros-Regular.86a2ceafae42.woff2") format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'texgyreheros-webod';
	src: url("../fonts/TeXGyreHeros-Italic.c343ca82b181.woff2") format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'texgyreheros-webod';
	src: url("../fonts/TeXGyreHeros-Bold.33618b87596e.woff2") format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}



@font-face {
	font-family: 'courier-prime-sans-webod';
	src: url("../fonts/CourierPrimeSans.11eb7d663d6f.woff2") format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'courier-prime-sans-webod';
	src: url("../fonts/CourierPrimeSansItalic.0d37b1f79033.woff2") format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'courier-prime-sans-webod';
	src: url("../fonts/CourierPrimeSansBold.2f0880ac5c48.woff2") format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}



@font-face {
	font-family: 'infini-web';
	src: url("../fonts/Infini-Regular.3cb8142ba4cc.woff2") format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'infini-web';
	src: url("../fonts/Infini-Italic.ee0daacac937.woff2") format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'infini-web';
	src: url("../fonts/Infini-Bold.1a3d958a94b7.woff2") format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}



@font-face {
	font-family: 'material-webod';
	src: url("../fonts/MaterialSymbolsSharp.e527eef2dc57.woff2") format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*====================
VARIABLES
==================== */

html {
	--font-sans: "tasaorbiter-webod", sans-serif;
	--font-serif: "newsreader-webod", serif;
	--font-mono: "sourcecodepro-webod", monospace;
	--font-icons: "material-webod", sans-serif;
	--font-default: var(--font-sans);
	--font-bodycopy: var(--font-serif);

	--lh: calc(0.86em + 0.74rem);
	--lh-small: calc(0.86em + 0.74rem);
	--lh-smaller: calc(0.86em + 0.74rem);
	--lh-larger: calc(0.86em + 0.74rem);
	--lh-large: calc(0.86em + 0.74rem);
	--lh-xlarge: calc(0.86em + 0.74rem);

	--fs-min: 18px;
	--fs-max: 19px;
	--factor: 2;
	--unit: calc(var(--factor) * var(--fs-min));
	--unit-double: calc(2 * var(--unit));
	--unit-triple: calc(3 * var(--unit));
	--unit-half: calc(var(--unit) / 2);
	--unit-third: calc(var(--unit) / 3);
	--unit-fourth: calc(var(--unit) / 4);
	--unit-eighth: calc(var(--unit) / 8);
	--rad-small: 4px;
	--rad-medium: 8px;
	--rad-large: 32px;

	--fs-xxlarge: 2.5rem;
	--fs-xlarge: 1.73rem;
	--fs-large: 1.44rem;
	--fs-larger: 1.2rem;
	--fs-smaller: 0.9rem;
	--fs-small: 0.75rem;
}

body {
	--col-txt1-raw: 26, 26, 26;
	--col-txt1: rgb(var(--col-txt1-raw)); /* 151617 */
	--col-txt2: rgba(var(--col-txt1-raw), 0.8); /* #444444 */
	--col-txt3: rgba(var(--col-txt1-raw), 0.67); /* #757575 */
	--col-txt4: rgba(var(--col-txt1-raw), 0.5);; /* #9E9E9E */
	--col-accent: #0000FF; /* 0047F3 */
	--col-bg: #FFFDE7; /* rgb(245, 245, 245) rgb(255, 252, 245) F3E7E6 f8ece4 0055FF 002665  */
	--col-accent-bg: #e6e6ff; /*  */
}

/*====================
NORMALISATION
==================== */

* {
	box-sizing: border-box;
}

html {
	font-family: var(--font-default);
	font-size: clamp(var(--fs-min), 0.8rem + 0.5vw, var(--fs-max));
	height: 100%;
	line-height: 1.4;
	margin: 0;
	padding: 0;
}

body {
	color: var(--col-txt1);
	min-height: 100%;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: 400;
	margin: 0;
	padding: 0;
}

h1 {
	font-size: var(--fs-xlarge);
	font-weight: 700;
	line-height: 1.1;
}

h1:first-child {
	margin-top: 0;
}

p {
	margin: 0;
}

* + p {
	margin: 1em 0 0;
}


a {
	color: var(--col-txt1);
	text-decoration: none;
}

a:hover {
	color: var(--col-accent);
}

ol, ul, menu, li {
	list-style: none;
	margin: 0;
	padding: 0;
}

figure, figcaption {
	margin: 0;
	padding: 0;
}

form {
	background: transparent;
	border-top: 2px solid;
	display: grid;
		column-gap: var(--unit-half);
		row-gap: var(--unit-fourth);
	padding: var(--unit-fourth) 0 0;
}

input:not([type='checkbox']),
textarea {
	background: white;
	border: none;
	border-bottom: 1px solid var(--col-txt4);
	border-radius: none;
	box-sizing: border-box;
	color: var(--col-txt1);
	font-family: var(--font-default);
	font-size: var(--fs-smaller);
	margin: 0;
	outline: none;
	position: relative;
	padding: var(--unit-fourth);
	min-width: intrinsic;
}

input:focus,
textarea:focus {
	background-color: var(--col-accent-bg);
	border-bottom-color: var(--col-accent);
	color: var(--col-accent);
}

input::placeholder,
textarea::placeholder {
	color: var(--col-txt4);
	font-size: var(--fs-smaller);
}

textarea {
	resize: none;
}

.checkbox {
	background: white;
	color: var(--col-txt1);
	display: grid;
		align-items: baseline;
		grid-column-gap: var(--unit-fourth);
		grid-template-columns: auto 1fr;
	font-family: var(--font-default);
	font-size: var(--fs-smaller);
	margin: var(--unit-half) 0 0;
}

.checkbox + .checkbox {
	margin-top: 0;
}

button {
	all: unset;
	background-color: var(--col-txt1);
	color: #ffffff;
	cursor: pointer;
	font-size: var(--fs-smaller);
	font-weight: 700;
	margin: var(--unit-half) 0 0;
	padding: var(--unit-fourth) var(--unit-half);
	width: fit-content;
}

button:hover {
	background-color: var(--col-accent);
}

.form__helper {
	color: var(--col-txt2);
	font-size: var(--fs-small);
	margin: var(--unit-half) 0;
}

.body {
	margin: 0 auto;
	padding: var(--unit-half) var(--unit-half) var(--unit-double);
	width: 100%;
	max-width: calc(1280px + var(--unit-double));
}

.body_projets {
	--col-txt1-raw: 255, 255, 224;
	--col-accent: #003EB3;
	background-color: var(--col-accent);
}

.body_projets a:hover {
	background-color: var(--col-txt1);
	border-radius: 2px;
	color: var(--col-accent);
}

.body__inner {
	display: grid;
		align-items: start;
		column-gap: var(--unit);
		row-gap: var(--unit-double);
}

.aside {
	position: sticky;
		top: var(--unit);
	z-index: 1;
}

.header {
	display: grid;
		grid-template-areas:
			"logo contact"
			"menu menu";
		justify-content: space-between;
		row-gap: var(--unit-half);
	font-size: var(--fs-smaller);
	grid-column: 1 / -1;
	position: sticky;
		top: var(--unit-half);
	z-index: 999;
}

.header__logo {
	font-weight: 700;
	grid-area: logo;
}

.header__contact {
	grid-area: contact;
}

.ligatures {
	font-variant-ligatures: discretionary-ligatures;
}

.menu {
	display: grid;
		column-gap: var(--unit);
		row-gap: var(--unit-eighth);
}

.menu__item {
	font-size: var(--fs-smaller);
	position: relative;
	width: fit-content;
}

.menu__anchor {
	color: var(--col-txt3);
	display: flex;
}

a.active {
	color: var(--col-txt1);
}

.main {
	grid-column: 2 / -1;
}

.main__heading {
	margin: 0 0 1em;
}

/*====================
BLOG
==================== */

.series-list {
	border-top: 2px solid;
	border-bottom: 1px solid var(--col-txt4);
	padding: var(--unit-half) 0;
}

.article-list {
	display: grid;
		gap: var(--unit);
}

.article__preview {
	display: grid;
		column-gap: var(--unit-half);
		grid-template-columns: 1fr 3fr;		
		row-gap: var(--unit-third);
	position: relative;
}

.article__link {
	height: 100%;
	position: absolute;
		top: 0;
	width: 100%;
	z-index: 1;
}

.article__link:hover ~ .article__heading {
	color: var(--col-accent);
}

.article__heading {
	font-family: var(--font-serif);
	font-size: var(--fs-larger);
	font-weight: 400;
	line-height: 1.16;
}

.article__meta {
	display: flex;
		align-items: end;
		flex-wrap: wrap;
		column-gap: var(--unit-fourth);
		row-gap: var(--unit-eighth);
	position: relative;
	z-index: 2;
}

.article__date {
	font-size: var(--fs-small);
	font-weight: 700;
}

.article-pw__cover {
	align-self: start;
	background: repeating-linear-gradient(135deg, transparent, transparent 4px, var(--col-txt4) 4px, var(--col-txt4) 6px);
	padding-top: 100%;
	position: relative;
	grid-column: 1 / 2;
	grid-row: 1 / span 2;
}

.article-pw-cover__inner {
	height: 100%;
	position: absolute;
		top: 0;
	width: 100%;
}

.article-pw-cover__img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.article {
	display: grid;
		align-items: baseline;
		column-gap: var(--unit);
		row-gap: var(--unit);
}

.article__header {
	display: grid;
		justify-items: start;
		row-gap: var(--unit-half);
	grid-column: 1 / -1;
}

.toolbar {
	display: flex;
		align-items: baseline;
		column-gap: var(--unit-fourth);
		row-gap: var(--unit-eighth);
	font-size: var(--fs-small);
}

.tool a {
	border: 1px solid var(--col-accent);
	border-radius: var(--rad-small);
	color: var(--col-accent);
	display: block;
	padding: var(--unit-eighth) var(--unit-half);
}

.tool a:hover {
	background-color: var(--col-accent);
	color: #FFFFFF;
}

.label {
	background-color: lightyellow;
	border: 1px solid lightyellow;
	border-radius: var(--rad-small);
	color: darkorange;
	padding: var(--unit-eighth) var(--unit-half);
}

.main__heading_article {
	font-family: var(--font-serif);
	font-size: var(--fs-xlarge);
	font-weight: 300;
	line-height: 1.1;
	margin: 0 0 var(--unit-half);
	text-transform: none;
}

.article__related {
	border-top: 2px solid;
	margin: var(--unit) 0 0;
	padding: var(--unit-half) 0 0;
}

.article__body {
	font-family: var(--font-bodycopy);
	line-height: 1.54;
}

.article__body > :not(figure) {
	max-width: 60ch;
}

.article__body h2,
.article__body h3,
.article__body h4,
.article__body h5,
.article__body h6 {
	font-size: var(--fs-larger);
	font-weight: 700;
	line-height: 1.3;
	margin: 2em 0 0;
}

.article__body a {
	color: var(--col-accent);
}

.article__body a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.article__body figure {
	margin: var(--fs-large) 0 0;
}

.article__body .article__cover {
	margin: 0 0 var(--fs-large);
}

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

.article__body figcaption {
	color: var(--col-txt2);
	font-size: var(--fs-smaller);
	margin: var(--unit-fourth) auto 0;
	width: 100%;
	max-width: calc(100vw - var(--unit));
}

.article__related {
	display: grid;
		align-self: end;
		row-gap: var(--unit);
}

.article__latest {
	display: grid;
		align-items: baseline;
		row-gap: var(--unit);
}

.aside__heading {
	font-size: var(--fs-smaller);
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.article__related .article__preview,
.article__latest .article__preview {
	grid-column: 2 / -1;
}

.tag-list {
	display: flex;
		align-items: center;
		flex-wrap: wrap;
		column-gap: var(--unit-fourth);
		row-gap: var(--unit-eighth);
}

.tag {
	font-size: var(--fs-small);
	text-decoration: underline;
}

.tag:hover {
	color: var(--col-accent);
}

/*

.tag:not(:last-child)::after {
	content: ", ";
}

*/

/*====================
PHOTOS
==================== */

.series-list {
	display: flex;
		align-items: start;
		column-gap: var(--unit-half);
		flex-wrap: wrap;
		row-gap: var(--unit-eighth);
	margin: 0 0 var(--unit);
}

.series__anchor {
	color: var(--col-txt3);
	display: block;
	font-size: var(--fs-smaller);
	white-space: nowrap;
}

.series__anchor.active {
	color: var(--col-txt1);
}

.sum {
	display: inline-block;
	font-weight: 400;
	margin: 0 0 0 var(--unit-eighth);
}

.sum::before {
	content: "\0028";
}

.sum::after {
	content: "\0029";
}

.series__heading {
	font-family: var(--font-serif);
	font-size: var(--fs-xxlarge);
	font-weight: 300;
	line-height: 1.1;
	margin: 0 0 var(--unit);
	text-transform: uppercase;
}

.series__description {
	font-family: var(--font-bodycopy);
	font-size: var(--fs-smaller);
}

.photo-list {
	display: grid;
		place-items: center;
		gap: var(--unit);
}

.photo__wrapper {
	container-type: inline-size;
	display: flex;
		justify-content: center;
	width: 100%;
}

.photo-list .photo__wrapper {
	cursor: pointer;
}

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

.photoimg__wrapper {
	position: relative;
}

.photo__file {
	align-self: center;
	display: block;
	max-height: 75vh;
	max-width: 100%;
}

.photo__caption {
	align-self: center;
	font-family: var(--font-bodycopy);
	font-size: var(--fs-small);
	margin: var(--unit-fourth) 0 0;
	width: 100%;
	max-width: calc(100vw - var(--unit));
}

/*====================
LIGHTBOX
==================== */

.indicator {
	backdrop-filter: blur(8px);
	background-color: rgba(255, 255, 255, 0.8);
	display: flex;
		align-items: center;
		justify-content: center;
	position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	opacity: 0;
	transition: opacity 200ms;
}

.htmx-request .indicator {
	opacity: 1;
}

.indicator__inner {
	background: var(--col-accent);
	border-radius: var(--rad-large);
	display: none;
	height: var(--unit);
	width: var(--unit);
	animation: rotation 500ms infinite ease-in;
}

.htmx-request .indicator__inner {
	display: block;
}

@keyframes rotation {
	0% {
		opacity: 1;
		transform: scale(0);
	}
	50% {
		opacity: 1;
		transform: scale(0.5);
	}
	100% {
		transform: scale(1.0);
		opacity: 0;
	}
}


#lightbox {
	display: flex;
}

#lightbox._active {
	backdrop-filter: blur(8px);
	background-color: rgba(255, 255, 255, 0.8);
	flex-direction: column;
	justify-content: center;
	position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	z-index: 2;
	animation: fadeIn 0.2s forwards;
}

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

#lightbox._active .photo__wrapper {
	animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUp {
	from {
		transform: translateY(20px);
	}
	to {
		transform: translateY(0);
	}
}


.cross {
	cursor: pointer;
	display: grid;
		grid-template-areas:
			"topvoid"
			"crossbar"
			"bottomvoid";
		grid-template-rows: 1fr 2px 1fr;
	height: var(--fs-large);
	padding: 2px;
	position: absolute;
		top: var(--unit);
		right: var(--unit);
	width: var(--fs-large);
	z-index: 1;
}

.cross__bar {
	border-top: 1px solid var(--col-txt1);
	border-bottom: 1px solid var(--col-txt1);
	grid-area: crossbar;
}

.cross:hover {
	background-color: var(--col-accent);
	border-color: var(--col-accent);
}

.cross:hover .cross__bar {
	border-color: #ffffff;
}

.crossbar__top {
	transform: rotate(-45deg);
}

.crossbar__bottom {
	transform: rotate(45deg);
}

#lightbox .photo__file {
	max-height: calc(100vh - var(--unit-triple));
	max-width: 100vw;
}

/*====================
PROJETS
==================== */

.project {
	border-top: 1px solid var(--col-txt4);
	display: grid;
		align-items: last baseline;
		column-gap: var(--unit);
		grid-auto-flow: dense;
		row-gap: var(--unit-half);
	padding: var(--unit) 0;
}

.project:first-child {
	border-top: 2px solid;
}

.project__heading {
	font-family: var(--font-serif);
	font-size: var(--fs-xxlarge);
	font-weight: 300;
	line-height: 1.1;
}

.project__heading a::after {
	content: "\f8ce";
	display: inline;
	font-family: var(--font-icons);
	font-size: var(--fs-larger);
	margin: 0 0 0 var(--unit-third);
	position: relative;
		bottom: -0.25em;
	vertical-align: last baseline;
}

.project__meta {
	display: grid;
		gap: var(--unit-fourth);
}

.project__description {
	font-family: var(--font-bodycopy);
}

/*====================
CONTACT
==================== */

.contact {
	display: grid;
		align-items: start;
		column-gap: var(--unit);
		row-gap: var(--unit-double);
}

.socials {
	display: grid;
		row-gap: var(--unit-fourth);
	font-size: var(--fs-smaller);
}

.socials__item {
	display: flex;
		align-items: center;
		column-gap: var(--unit-half);
	font-weight: 700;
	position: relative;
}

.socials__icon {
	border: 2px solid;
	height: 2em;
	position: relative;
	width: 2em;
}

.socials__item:hover .socials__icon {
	background-color: var(--col-accent);
	border-color: var(--col-accent);
	color: #FFFFFF;
}

.socials__icon::before {
	position: absolute;
		top: 50%;
		left: 50%;
	transform: translate(-50%, -50%);
}

.socials__ig .socials__icon::before {
	content: "Ig";
}

.socials__lk .socials__icon::before {
	content: "Lk";
}

.socials__th .socials__icon::before {
	content: "Th";
}

/*====================
MEDIA QUERIES
==================== */

@media (hover: hover) {

	.project__dingbat {
		color: var(--col-accent);
		opacity: 0;
	}

}

@media (max-width: 767px) {

	.desktop-only {
		display: none;
	}

	.article aside:first-of-type {
		border-top: 2px solid;
		margin: var(--unit) 0 0;
		padding: var(--unit-half) 0 0;
	}

	.article aside + aside {
		border-top: 1px solid var(--col-txt4);
		padding: var(--unit-half) 0 0;
	}

	.aside__heading {
		margin: 0 var(--unit-half) 0 0;
	}

	.article__body .article__cover {
		margin: 0 calc(-1 * var(--unit-half)) var(--fs-large);
	}
}

@media (min-width: 768px) {

	:root {
		--fs-smaller: 0.83rem;
		--fs-small: 0.69rem;
	}

	.body {
		padding: var(--unit) var(--unit) var(--unit-double);
	}

	.mobile-only {
		display: none;
	}

	form {
		display: grid;
			grid-template-columns: repeat(2, 1fr);
	}

	form > *:not(._half) {
		grid-column: span 2;
	}

	.header {
		display: flex;
			column-gap: var(--unit);
			justify-content: space-between;
		margin: 0 0 var(--unit);
	}

	.menu {
		display: flex;
	}

	.menu__contact {
		margin: var(--unit) 0 0;
	}

	.photo-list {
		gap: var(--unit-double);
		grid-template-columns: repeat(7, 1fr);
	}

	.photo-list .photo__wrapper,
	.series__description {
		grid-column: span 3;
	}

	.photo-list .photo__wrapper:nth-child(3n) {
		grid-column: span 4;
	}

	.photo-list .photo__wrapper:nth-child(5n) {
		grid-column: span 3;
		grid-row: span 2;
	}

	.photo-list .photo__wrapper:nth-child(7n) {
		grid-column: span 7;
	}

	.photo__file {
		max-height: min(125cqw, 75vh);
	}

	#lightbox .photo__file {
		max-width: calc(100vw - var(--unit-double));
	}

	.article {
		grid-template-columns: 3fr 1fr;
	}

	.article__heading {
		font-size: var(--fs-large);
	}

	.main__heading_article {
		font-size: var(--fs-xxlarge);
	}

	.article-list .article__preview, 
	.article__latest .article__preview {
		display: grid;
			column-gap: var(--unit);
			grid-template-columns: 1fr 7fr;
	}

	.article-list .article-pw__cover,
	.article__latest .article-pw__cover {
		padding-top: 67%;
	}

	.article__latest {
		border-top: 2px solid;
		grid-column: 1 / 3;
		margin: var(--unit) 0 0;
		padding: var(--unit-half) 0 0;
	}

	.article aside.article__related {
		border: none;
		grid-template-columns: unset;
		grid-column: 2 / 3;
		grid-row: 2 / 3;
		margin: 0;
		padding: 0;
	}

	.project {
		display: grid;
			grid-template-columns: repeat(2, 1fr);
		padding: var(--unit-half) 0;
	}

	.contact {
		grid-template-columns: 3fr 1fr;
		column-gap: var(--unit-double);
	}

	.contact__form {
		width: 100%;
		max-width: 65ch;
	}

	.socials__item {
		column-gap: var(--unit-fourth);
	}

}