.top-header {
	--absolute-margins: 15%;
	--gap: 20px;
	position: relative;
	margin-bottom: 40px;
	picture {
		position: relative;
		width: 100%;
		margin-top: var(--gap);
		z-index: 2;
		display: block;
	}
	.title {
		padding: 0 1.7rem;
	}
	.top-container {
		margin-top: var(--gap);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--gap);
	}
	.concept {
		background-color: var(--color-raspberry);
		color: var(--color-white);
		margin-top: calc(-1 * var(--absolute-margins));
		display: flex;
		flex-direction: column;
		gap: var(--gap);
		padding: var(--absolute-margins) 40px 30px 40px;
		li {
			list-style-type: none;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			.value {
				flex: 1 1 45%;
				.number {
					font-size: 4.5rem;
					line-height: 4.5rem
				}
				.percent {
					font-size: 3.7rem;
					line-height: 3.7rem;
				}
			}
			.label {
				flex: 1 1 55%;
				padding-bottom: 12px;
				font-family: Inter;
				font-weight: 800;
				font-size: 1rem;
				line-height: 1.4rem;
				letter-spacing: initial;
				display: flex;
				flex-direction: column;
			}
			&.tips {
				font-size: 22px;
				line-height: 25px;
				color: var(--color-eggshell);
				transform: rotate(-6.5deg);
				padding: 15px 0;
				align-items: center;
				justify-content: space-around;
				span {
					display: block;
				}
				.multi-heart {
					display: block;
					width: 36px;
					height: 36px;
					background: url("../../../images/home/multi-heart-v_yKDBR.webp") no-repeat center center;
				}
			}
		}
	}
	@media screen and (min-width: 720px) {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		.top-container {
			flex: 1 1 50%;
		}
		.img-container {
			display: flex;
			flex: 1 1 50%;
			picture {
				width: 50%;
				max-width: 700px;
				position: absolute;
				right: 0;
				top: -66px;
				margin-top: 0;
			}
		}
		.concept {
			z-index: 3;
			flex-direction: row;
			padding: 15px 0;
			flex: 1 1 100%;
			position: relative;
			justify-content: space-around;
			left: auto;
			right: auto;
			margin: var(--gap) 0 0 0;
			gap: 0;
			li {
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.value {
					flex: 1 1 auto;
				}
				.label {
					flex: 1 1 auto;
					white-space: nowrap;
					display: flex;
					flex-direction: column;
				}
			}
		}
	}
	@media screen and (min-width: 1100px) {
		--gap: 50px;
		.top-container {
			max-width: 540px;
			gap: 20px;
			flex: 1 1 58%;
		}
		.img-container {
			flex: 1 1 42%;
			max-width: 700px;
			picture {
				top: -66px;
			}
		}
		.concept {
			max-width: 90%;
			li {
				flex-direction: row;
				align-items: flex-end;
				gap: 10px;
				.number {
					font-size: 100px;
				}
				.percent {
					font-size: 70px;
				}
				&.tips {
					gap: 15px;
				}
			}
		}
	}
	@media screen and (min-width: 1600px) {
		align-items: center;
		.top-container {
			flex: 1 1 50%;
			margin-top: 0;
		}
		.img-container {
			flex: 1 1 50%;
			max-width: 800px;
			justify-content: center;
			picture {
				top: 0;
				margin-top: 0;
				position: relative;
				max-width: 800px;
				width: 100%;
			}
		}
		.concept {
			max-width: 80%;
			margin: 0;
		}
	}
}