.technologies-gutenberg-block {
	width: 100%;
	color: var(--c-white);
	margin-bottom: 50px;
	container: technologies / inline-size;
}

.technologies-gutenberg-block .container {
	display: flex;
	flex-direction: column;
}

.technologies-gutenberg-block .technologie {
	display: flex;
}
.technologies-gutenberg-block .technologie:nth-child(odd) {
	flex-direction: row-reverse;
}

.technologies-gutenberg-block .technologie > * {
	flex: 1 1 1%;
}

.technologies-gutenberg-block .technologie:nth-child(odd) > *:first-child {
	flex: 1.04085 1 1%;
}
.technologies-gutenberg-block .technologie:nth-child(even) > *:last-child {
	flex: 1.04085 1 1%;
}

.technologies-gutenberg-block .technologie .title {
	margin-bottom: 1.5rem;
}
.technologies-gutenberg-block .technologie .content {
}
.technologies-gutenberg-block .technologie .content p {
}
.technologies-gutenberg-block .technologie .links {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	margin-top: 50px;
}
.technologies-gutenberg-block .technologie-content {
	background: var(--c-dark);
	/* padding: 100px 0 158px; */
	padding: 6.536% 0 10.327%;
	position: relative;
	z-index: 1;
}

.technologies-gutenberg-block .technologie-content .inner {
	/* padding-inline: 20px;
	width: min(530px, 100%);
	margin-inline: 14.75% auto; */

	padding-inline: 60px;
	width: min(610px, 91.125%);
	margin-inline: 9.875% auto;
}

.technologies-gutenberg-block .technologie-content .inner {
}
.technologies-gutenberg-block
	.technologie:nth-child(even)
	.technologie-content
	.inner {
	margin-inline: auto 8.875%;
}

.technologies-gutenberg-block .iphone-container {
	position: absolute;
	z-index: 1;
	right: 0;
	top: 50px;

	width: auto;
	height: 103.4%;
}

.technologies-gutenberg-block .iphone {
	translate: 50% 0;
	width: auto;
	height: 100%;
}

.technologies-gutenberg-block .technologie:nth-child(odd) .iphone-container {
	right: unset;
	left: 0;
}

.technologies-gutenberg-block .technologie:nth-child(odd) .iphone {
	translate: -50% 0;
}

.technologies-gutenberg-block .technologie-thumb {
	overflow: hidden;
	position: relative;
}

.technologies-gutenberg-block .technologie-thumb .picture {
	/* aspect-ratio: 750/470; */
	height: 100%;
	transition: scale 0.33s ease-in-out;
}

.technologies-gutenberg-block .technologie-thumb video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.technologies-gutenberg-block .technologie-thumb:hover .picture {
	scale: 1.07;
}

.technologies-gutenberg-block .play {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 124px;
	height: 124px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--c-gold-light_1);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0);
	transition: background 0.33s ease-in-out;
}

.technologies-gutenberg-block .play:hover {
	background: rgba(255, 255, 255, 0.4);
}

.technologies-gutenberg-block .play svg {
	color: var(--c-gold-light_1);
}

.technologies-gutenberg-block .m-button.stroked {
	--_bg_hover: var(--c-gold-light_1);
	--_color: var(--c-gold-light_1);
	--_border-color: var(--c-gold-light_1);
}

@container technologies (max-width: 900px) {
	.technologies-gutenberg-block .technologie {
		flex-direction: column !important;
		gap: 0;
	}
	.technologies-gutenberg-block .technologie-content {
		margin-top: 0 !important;
		padding: 0;
	}
	.technologies-gutenberg-block .technologie-thumb {
		width: 100%;
	}
	.technologies-gutenberg-block .technologie-thumb .picture {
		max-height: 33vh;
	}

	.technologies-gutenberg-block .technologie-content h2 {
		font-size: 1.75rem;
	}
}

@media (max-width: 991px) {
	.technologies-gutenberg-block .container > .title {
		font-size: 1.875rem;
	}
}

@media (max-width: 767px) {
	.technologies-gutenberg-block .container {
		width: 100%;
	}

	.technologies-gutenberg-block .technologie .title {
		font-size: 1.25rem;
	}
	.technologies-gutenberg-block .technologie-thumb {
		aspect-ratio: 5/3;
	}

	.technologies-gutenberg-block .technologie-thumb .picture {
		max-height: initial;
	}

	.technologies-gutenberg-block .technologie-content .inner {
		width: 100%;
		padding: 20px;
		margin: 0;
	}
}