@charset "UTF-8";
.performance-title .h1 {
		max-width: 11.48em;
}
@media only screen and (min-width: 1024px) {
		.performance-title {
				margin-bottom: 48px;
		}
		.performance-title .h1 {
				width: 43rem;
		}
		.performance-title .text {
				max-width: 27.3em;
		}
}
.performance .list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: 10px;
		grid-template-columns: repeat(1, 1fr);
}
@media only screen and (min-width: 685px) and (max-width: 1023px) {
		.performance .list {
				grid-template-columns: repeat(2, 1fr);
		}
}
.performance .block {
		list-style: none;
		margin: 0;
		display: flex;
		flex-direction: column;
		padding: 50px 30px;
		position: relative;
		border-radius: 10px;
		container-type: inline-size;
		container-name: performance-block;
}
.performance .block.light {
		background: var(--white);
		color: var(--dark);
}
.performance .block.dark {
		background: var(--dark);
		color: var(--white);
}
.performance .list .h2 {
		line-height: 1.2;
		margin-bottom: 20px;
		width: 100%;
		max-width: 14.2727em;
}
.performance .list .text {
		flex: 1 0 auto;
		width: 100%;
		max-width: 34.888em;
		font-size: 16px;
}
.performance .list .num {
		margin-top: 50px;
}
@container performance-block (min-width: 400px) {
		.performance .list .num {
				font-size: 24px;
		}
}
@media only screen and (min-width: 1024px) {
		.performance {
				--side-padding: 64px;
		}
		.performance .inner-title {
				font-size: 20px;
		}
		.performance .block {
				padding: 50px 440px 50px 50px;
				justify-content: center;
		}
		.performance .block.light {
				min-height: 375px;
		}
		.performance .block.dark {
				min-height: 335px;
		}
		.performance .list .h2 {
				font-size: 2.75rem;
		}
		.performance .list .text {
				flex: 0 0 auto;
				font-size: 18px;
		}
		.performance .list .num {
				position: absolute;
				top: 50%;
				right: 50px;
				transform: translate3d(0, -50%, 0);
				margin: 0;
				width: 341px;
		}
}