@charset "UTF-8";
/* Common */
/* Media */
/* Content */
/* Common animations */
@-webkit-keyframes marquee {
	0% {
		-webkit-transform: translateX(calc(100% + 2.77778vw));
		        transform: translateX(calc(100% + 2.77778vw));
		/* Начинаем движение справа */
	}
	100% {
		-webkit-transform: translateX(-100%);
		        transform: translateX(-100%);
		/* Заканчиваем движением слева */
	}
}
@keyframes marquee {
	0% {
		-webkit-transform: translateX(calc(100% + 2.77778vw));
		        transform: translateX(calc(100% + 2.77778vw));
		/* Начинаем движение справа */
	}
	100% {
		-webkit-transform: translateX(-100%);
		        transform: translateX(-100%);
		/* Заканчиваем движением слева */
	}
}

@-webkit-keyframes marquee-bg_rtl {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		        transform: translate3d(0, 0, 0);
	}
	to {
		-webkit-transform: translate3d(-50%, 0, 0);
		        transform: translate3d(-50%, 0, 0);
	}
}

@keyframes marquee-bg_rtl {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		        transform: translate3d(0, 0, 0);
	}
	to {
		-webkit-transform: translate3d(-50%, 0, 0);
		        transform: translate3d(-50%, 0, 0);
	}
}

@-webkit-keyframes fadeOut {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

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

/* Blocks */
.projects {
	padding-top: 4.44444vw;
	padding-bottom: 3.33333vw;
}

.projects__items {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 2.22222vw;
}

.projects__item {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 2.22222vw;
	height: 100%;
	padding: 2.22222vw;
	border-radius: 3.33333vw;
	background: #DFE0E4;
	min-height: 49.72222vw;
	transition: all .3s;
}

.projects__item:not([href]) {
	cursor: default;
	pointer-events: none;
}

.projects__item-wrap {
	display: grid;
	grid-template-rows: 7.5vw 1fr auto;
	grid-gap: 2.77778vw;
	height: 100%;
}

.projects__item-image {
	position: relative;
	border-radius: 2.22222vw;
	overflow: hidden;
	max-height: 45.27778vw;
}

.projects__item-image::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 2.22222vw;
	backdrop-filter: blur(1.38889vw);
	overflow: hidden;
	z-index: 3;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.projects__item-image img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.projects__item-image-button {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	z-index: 4;
	max-width: 28.88889vw;
	opacity: 0;
}

.projects__item-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2.77778vw;
}

.projects__item-logo {
	width: 7.5vw;
	height: 7.5vw;
	border-radius: 50%;
	flex: 0 0 7.5vw;
	background: white;
}

.projects__item-logo img {
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	   object-fit: contain;
}

.projects__item-tag {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 600;
	font-size: 3.33333vw;
	line-height: 1;
	border: 0.5px solid #A0A3A6;
	border-radius: 1.66667vw;
	height: 5.55556vw;
	min-width: 31.11111vw;
	margin-left: auto;
}

.projects__item-name {
	font-weight: 600;
	font-size: 5.55556vw;
	line-height: 90%;
	letter-spacing: -0.05em;
}

.projects__item-text {
	font-weight: 600;
	font-size: 3.33333vw;
	line-height: 110%;
	color: #7E7F81;
}

.projects__item-more {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 5.55556vw;
	height: 5.55556vw;
	border-radius: 0.83333vw;
	background: #D0D0D1;
}

.projects__item-more i {
	width: 1.11111vw;
	height: 1.11111vw;
	flex: 0 0 auto;
	font-size: 1.11111vw;
}

.projects__item-button {
	max-width: 28.88889vw;
}

.projects__item:hover {
	background: #CCCDD1;
}

.projects__item:hover .projects__item-tag {
	border-color: #7E7F81;
}

.projects__item:hover .projects__item-more {
	background: #fff;
}

.projects__item:hover .projects__item-more i {
	-webkit-filter: grayscale(100%) brightness(0%) contrast(0.9);
	        filter: grayscale(100%) brightness(0%) contrast(0.9);
}

.projects__item:hover .projects__item-image-button {
	opacity: 1;
}

.projects__item:hover .projects__item-image::after {
	opacity: 1;
}