.interactive_images {
	padding: 120px 0;
}

.interactive_images .flex {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 125px;
	width: 100%;
}

.interactive_images .flex .half {
	width: calc(50% - 62.5px);
}

.interactive_images .flex .half .title {
	display: block;
	font-size: 44px;
	font-style: normal;
	font-weight: 700;
	line-height: 50px;
	color: #000;
	margin: 0 auto 32px auto;
}

.interactive_images .flex .half .subtitle {
	display: block;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;  
	color: #000;
	margin: 0 auto 32px auto;
}

.interactive_images .flex .half ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.interactive_images .flex .half ul li {
	display: block;
	border-bottom: 1px solid var(--Blue-0, #C5D6EA);
}

.interactive_images .flex .half ul li a {
	display: block;
	position: relative;
	padding:12px 24px;
	padding-right: 66px;
	color: #000;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 32px; 
	transition: 300ms;
}

.interactive_images .flex .half ul li a span {
	color: #000;
	font-size: 24px;
	font-weight: 500;
	line-height: 32px; 
	transition: 300ms;
}

.interactive_images .flex .half ul li a svg {
	width: 33px;
	height: 32px;
	position: absolute;
	top:12px;
	right: 24px;
	transition: 300ms;
}

.interactive_images .flex .half ul li a svg path {
	transition: 300ms;
}

.interactive_images .flex .half ul li.active a,
.interactive_images .flex .half ul li.active a span,
.interactive_images .flex .half ul li a:hover,
.interactive_images .flex .half ul li a:hover span {
	color: #8DD3BF;
}

.interactive_images .flex .half ul li.active a svg path,
.interactive_images .flex .half ul li a:hover svg path {
	stroke: #8DD3BF;
}

.interactive_images .flex .half ul li.active a svg,
.interactive_images .flex .half ul li a:hover svg {
	right: 0;
}

.interactive_images .flex .half .images {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	display: flex;
}

.interactive_images .flex .half .images .image {
	position: relative;
	height: 100%;
	min-height: 485px;
	cursor: pointer;
	width: 25%;
	transition: 300ms;
}

.interactive_images .flex .half .images .image:nth-child(1) {
	border-radius: 8px 0 0 8px;
}

.interactive_images .flex .half .images .image:nth-child(4) {
	border-radius: 0 8px 8px 0;
}

.interactive_images .flex .half .images .image:after {
	content: " ";
	display: block;
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('../images/rectangle-960.png');
	background-size: 100% 100%;
	transition: 300ms;
}

.interactive_images .flex .half .images .image.active,
.interactive_images .flex .half .images .image:hover {
	width: 40%;
}

@media only screen and (max-width: 996px) {
	.interactive_images {
		padding: 80px 0;
	}

	.interactive_images .flex {
		flex-wrap: wrap;
		gap: 48px;
	}

	.interactive_images .flex .half {
		width: 100%;
	}

	.interactive_images .flex .half .images .image { 
		min-height: 260px;
	}

	.interactive_images .flex .half .title {
		font-size: 32px;
		font-style: normal;
		font-weight: 700;
		line-height: 42px; 
	}

	.interactive_images .flex .half .subtitle {
		font-size: 18px;
		font-style: normal;
		font-weight: 400;
		line-height: 24px;
	}

	.interactive_images .flex .half ul li a,
	.interactive_images .flex .half ul li a span {
		font-size: 24px;
		font-style: normal;
		line-height: 32px;
	}
}