.gutn-technologies {
}
.gutn-technologies .technologies {
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.gutn-technologies .technologies-row {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 22px;
}
.gutn-technologies .technology {
	display: flex;
	flex-direction: column;
	gap: 48px 20px;
	flex: 1 1 calc(25% - 22px);
	transition: all 0.4s ease-in-out;
}

.gutn-technologies .technology-thumb {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
}
.gutn-technologies .technology-thumb::before {
	content: "";
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.01);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
	pointer-events: none;
}
.gutn-technologies .technology-thumb .play {
	width: 82px;
	height: 82px;
	border-radius: 100%;
	background: rgba(32, 69, 91, 0.8);
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 25px 22px 25px 28px;
}
.gutn-technologies .technology-thumb .play svg {
	color: var(--c-white);
}
.gutn-technologies .technology-thumb .picture {
	height: 300px;
}
.gutn-technologies .technology-content {
}
.gutn-technologies .technology-description {
	background: linear-gradient(
		180deg,
		#dac284 0%,
		rgba(199, 164, 94, 0.88) 100%
	);
	padding: 32px;
	color: var(--c-white);
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	translate: 0 35px;
	/* transition: translate 0.4s ease-in-out 0.4s; */
}
.gutn-technologies .technology-content h3 {
	color: var(--c-main);
}

/* Hover */
.gutn-technologies .technology:hover {
	flex-basis: 570px;
}
.gutn-technologies
	.technologies-row:has(.technology:hover)
	.technology:not(:hover) {
	flex-basis: 258px;
}
.gutn-technologies .technology:hover .technology-description {
	/* opacity: 1; */
	/* translate: 0; */
	animation: showContent 0.4s ease-in-out 0.4s forwards;
}
.gutn-technologies .technology:hover .technology-thumb::before {
	opacity: 1;
}

@keyframes showContent {
	from {
		translate: 0 35px;
		opacity: 0;
	}
	to {
		translate: 0;
		opacity: 1;
	}
}

@media (max-width: 1024px) {
	.gutn-technologies .technology {
		flex: 1 1 calc(50% - 22px);
	}

	.gutn-technologies .technology:hover {
		flex-basis: calc(50% - 22px);
	}
	.gutn-technologies
		.technologiesrow:has(.technology:hover)
		.technology:not(:hover) {
		flex-basis: calc(50% - 22px);
	}
}

@media (max-width: 767px) {
	.gutn-technologies .technologies {
		gap: 56px;
	}
	.gutn-technologies .technologies-row {
		flex-direction: column;
		gap: 56px;
	}
	.gutn-technologies .technology {
		flex-basis: 100% !important;
		width: 100%;
	}
}