.hk-about-hero {
	--hk-about-col: 52%;

	display: grid;
	grid-template-columns: var(--hk-about-col) minmax(0, 1fr);
	align-items: center;
	column-gap: 24px;
	padding: 25px 29px 25px 41px;
	border-radius: 37px;
	background: var(--hk-beige-2);
}

.hk-about-hero__body {
	padding-block: 40px;
}

.hk-about-hero__title {
	margin: 0 0 40px;
	color: var(--hk-brown-2);
	font-family: var(--hk-font);
	font-size: clamp(32px, 3.85vw, 55px);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -.03em;
}

/* Desktop: tiêu đề được phép tràn sang phần trống phía trên đường chéo của ảnh (như Figma). */
@media (min-width: 1025px) {
	.hk-about-hero__title {
		position: relative;
		z-index: 2;
		width: max-content;
		max-width: calc(100% + 260px);
	}
}

.hk-about-hero__title .hk-inline-icon {
	--hk-anim-w: 1.5em;
}

.hk-about-hero__content {
	max-width: 590px;
	color: var(--hk-ink);
	font-size: 15px;
	line-height: 1.45;
}

.hk-about-hero__content p {
	margin-bottom: .7em;
}

.hk-about-hero__media {
	position: relative;
	align-self: stretch;
	min-height: 561px;
	overflow: hidden;
}

.hk-about-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.hk-about-hero__media--mask {
	-webkit-mask: url("../../../assets/images/decor/about-hero-mask.svg") center / 100% 100% no-repeat;
	mask: url("../../../assets/images/decor/about-hero-mask.svg") center / 100% 100% no-repeat;
}

.hk-about-hero__media--rounded {
	border-radius: 37px;
}

@media (max-width: 1024px) {
	.hk-about-hero {
		grid-template-columns: 1fr;
		row-gap: 24px;
		padding: 32px;
	}

	.hk-about-hero__body {
		padding-block: 8px 0;
	}

	.hk-about-hero__content {
		max-width: none;
	}

	.hk-about-hero__media {
		min-height: 0;
		aspect-ratio: 680 / 561;
	}
}

@media (max-width: 767px) {
	.hk-about-hero {
		padding: 24px 18px 18px;
		border-radius: 24px;
	}

	.hk-about-hero__title {
		margin-bottom: 24px;
	}

	.hk-about-hero__content {
		font-size: 14px;
	}
}