/* Homepage */

.intro__content {
	color: var(--primary);
	text-align: center;
}

.intro__content p {
	margin: 0 auto;
	max-width: 100%;
	width: 25em;
}

.intro__content .title, 
.intro__content h1, 
.intro__content h2, 
.intro__content h3, 
.intro__content h4, 
.intro__content h5, 
.intro__content h6 {
	color: #fff;
	font-size: 1.5em;
	margin: 0 auto;
	max-width: 100%;
	width: 15em;
}

@media (min-width: 400px) {

	.intro__content .title, 
	.intro__content h1, 
	.intro__content h2, 
	.intro__content h3, 
	.intro__content h4, 
	.intro__content h5, 
	.intro__content h6 {
		font-size: 2em;
	}
}

@media (min-width: 1000px) {

	.intro__content p {
		font-size: 1.5em;
	}

	.intro__content .title, 
	.intro__content h1, 
	.intro__content h2, 
	.intro__content h3, 
	.intro__content h4, 
	.intro__content h5, 
	.intro__content h6 {
		font-size: 3em;
	}

}

.projects {
	--ui-gap: 1px;
	align-items: stretch;
	background-color: #fff;
	box-sizing: border-box;
	color: #212121;
	display: grid;
	gap: var(--ui-gap);
	grid-template-columns: 1fr;
	height: 400dvw;
	height: calc(388.4009vw + 2.7em);
	justify-content: stretch;
	padding: 1.35em;
}

@media (min-width: 420px) {
	.projects {
		height: 300dvw;
		height: calc(291.6667vw + 2.7em);
	}
}

@media (min-width: 1000px) {
	.projects {
		--ui-gap: 1.35em;
		grid-template-columns: 1fr 2fr;
		height: 125dvw;
		height: calc(108.2335dvw + 5.4em);
		padding: 2.7em 3.6em;
	}
}

@media (min-width: 1200px) {
	.projects {
		height: 125dvw;
		height: calc(119.3dvw + 5.4em);
	}
}

@media (min-width: 1600px) {
	.projects {
		height: calc(100.6594dvw + 5.4em);
	}
}

.projects__column--1 {
	align-items: stretch;
	display: grid;
	gap: var(--ui-gap);
	grid-template-columns: 1fr;
	grid-template-rows: 8fr 6fr 4fr;
	justify-content: stretch;
}

.projects__column--2 {
	align-items: stretch;
	display: grid;
	gap: var(--ui-gap);
	grid-template-columns: 1fr;
	grid-template-rows: 8fr 3fr 2fr;
	justify-content: stretch;
}

.projects__row--1 {
	display: grid;
	gap: var(--ui-gap);
	grid-template-areas:
		"a b"
		"a d"
		"c d";
	grid-template-columns: 4fr 3fr;
}

.projects__item--4 {
	grid-area: a;
}

.projects__item--5 {
	grid-area: b;
}

.projects__item--6 {
	grid-area: c;
}

.projects__item--7 {
	grid-area: d;
}

.projects__item {
	color: #fff;
	overflow: hidden;
	position: relative;
}

.projects__image,
.projects__img,
.projects__image .placeholder,
.projects__text,
.projects__link {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
}

.projects__image {
	background: #212121;
}

.projects__img {
	min-height: 100%;
	min-width: 100%;
}

.projects__text {
	color: var(--primary);
	font-size: 0.75em;
	position: relative;
	padding: 0.9em 1.35em;
	z-index: 3;
}

@media (min-width: 640px) {

	.projects__text {
		padding: 2.7em 3.6em;
	}

}

.projects__text .intro {
	color: #fff;
	font-family: var(--font-heading);
	font-size: 1.5em;
	font-style: var(--font-heading-style);
	font-weight: var(--font-heading-weight);
	line-height: 1.5;
	padding: 0;
}

.projects__text h2,
.projects__text h3,
.projects__text h4,
.projects__text h5,
.projects__text h6 {
	font-family: var(--font-surplus);
	font-size: 2.5em;
	font-style: var(--font-surplus-style);
	font-weight: var(--font-surplus-weight);
	line-height: 1;
	padding: 0;
}

@media (min-width: 750px) {

	.projects__text .intro {
		font-size: 1.5em;
	}

	.projects__text h2,
	.projects__text h3,
	.projects__text h4,
	.projects__text h5,
	.projects__text h6 {
		font-size: 3em;
	}
}

@media (min-width: 1200px) {

	.projects__text {
		font-size: 1em;
	}

}

@media (min-width: 1800px) {

	.projects__text .intro {
		font-size: 1.5em;
	}

	.projects__text h2,
	.projects__text h3,
	.projects__text h4,
	.projects__text h5,
	.projects__text h6 {
		font-size: 4em;
	}
}

.projects__img {
	filter: grayscale(1);
	opacity: 0.4;
	transition: filter 0.3s linear;
}

.projects__item:hover .projects__img {
	filter: grayscale(0);
	transition: filter 0.1s linear;
}

.projects__link {
	z-index: 4;
}

.partners {
	background: #fff;
	color: #212121;
	overflow: hidden;
}

.partners__intro {
	text-align: center;
}

.partners__img {
	margin: 0 auto;
	max-width: 100%;
	max-width: calc(100% - 1.35em);
	width: 220px;
}

.glide__slide--partners {
	align-items: center;
	display: flex;
	justify-content: center;
}

.partners__img {
	object-fit: contain;
	filter: grayscale(1);
	transition: filter 0.1s linear;
}

.partners__img:hover {
	filter: grayscale(0);
}