.about-yappika-area {
	position: relative;
	overflow: hidden;
	width: 100%;
	background: linear-gradient(
		19.19deg,
		#bc1b1b 13.65%,
		#f60000 57.23%,
		#fb8080 98.66%
	);
	border-radius: 30px;
	padding: 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
	color: white;
	@media only screen and (min-width: 768px) {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 48px;
	}

	&::after {
		content: '';
		position: absolute;
		bottom: -50px;
		left: 25%;
		height: 336px;
		width: 500px;
		background-image: url(pix/about-yappika-accent.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		z-index: 1;
	}

	.text-container {
		width: 100%;

		@media only screen and (min-width: 768px) {
			width: 50%;
		}

		.section-title {
			font-size: 40px;
			font-weight: 700;
			color: white !important;
			margin-bottom: 16px;
		}

		.section-description {
			font-size: 18px;
			padding-bottom: 16px;
			color: white !important;
		}

		.cta {
			border: 2px solid white;
			border-radius: 8px;
			padding: 10px 25px;
			color: white;
		}
	}

	.image-container {
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		gap: 10px;
		flex-wrap: wrap;
		justify-content: end;

		@media only screen and (min-width: 768px) {
			width: 50%;
		}
	}

	.image-item {
		border-radius: 20px;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			object-position: top center;
		}

		&:nth-child(1) {
			width: calc(55% - 5px);
			z-index: 2;
			img {
				aspect-ratio: 271/284;
			}
		}

		&:nth-child(2) {
			width: calc(45% - 5px);
			img {
				aspect-ratio: 204/185;
			}
		}

		&:nth-child(3) {
			margin-top: -80px;
			width: 70%;

			img {
				aspect-ratio: 298/182;
			}
		}
	}
}