:root {
	--lg-sticker-shape: polygon(50% 0%, 58% 3%, 65% 2%, 70% 8%, 78% 9%, 82% 16%, 89% 21%, 91% 28%, 97% 35%, 96% 43%, 100% 50%, 96% 57%, 97% 65%, 91% 72%, 89% 79%, 82% 84%, 78% 91%, 70% 92%, 65% 98%, 58% 97%, 50% 100%, 42% 97%, 35% 98%, 30% 92%, 22% 91%, 18% 84%, 11% 79%, 9% 72%, 3% 65%, 4% 57%, 0% 50%, 4% 43%, 3% 35%, 9% 28%, 11% 21%, 18% 16%, 22% 9%, 30% 8%, 35% 2%, 42% 3%);
}

.lg-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(120deg, var(--lg-pink-100), var(--lg-pink-50) 55%, var(--lg-white));
}

.lg-hero__layout {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "brand" "quote" "visual" "benefits";
	gap: 24px;
	padding-top: 40px;
}

.lg-hero__brand {
	grid-area: brand;
	align-self: center;
	min-width: 0;
	text-align: center;
}

.lg-hero__logo {
	display: block;
	width: min(100%, 600px);
	height: auto;
	max-height: 250px;
	margin-inline: auto;
	object-fit: contain;
}

.lg-hero-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 24px 12px;
	border: 1px dashed var(--lg-border);
	border-radius: var(--lg-radius-lg);
	background: var(--lg-pink-50);
	color: var(--lg-text-soft);
	font-family: var(--lg-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
	overflow-wrap: anywhere;
}

.lg-hero-placeholder span {
	font-size: 0.75rem;
}

.lg-hero__logo-placeholder {
	width: min(100%, 600px);
	min-height: 150px;
	margin-inline: auto;
}

.lg-hero__tagline {
	position: relative;
	isolation: isolate;
	margin-top: 18px;
	padding: 12px 10px;
	transform: rotate(-2deg);
}

.lg-hero__tagline p {
	margin: 0;
	color: var(--lg-pink-700);
	font-family: var(--lg-font-handwritten);
	font-size: clamp(1.35rem, 2vw, 1.8rem);
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}

.lg-hero__tagline--placeholder {
	border: 1px dashed var(--lg-border);
	border-radius: var(--lg-radius-pill);
	background: var(--lg-pink-100);
}

.lg-hero__brush,
.lg-hero__quote-heart {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
}

.lg-hero__asset-note {
	display: block;
	margin-top: 4px;
	color: var(--lg-text-soft);
	font-family: var(--lg-font-body);
	font-size: 0.625rem;
	font-weight: 400;
	line-height: 1.4;
}

.lg-hero__quote {
	position: relative;
	grid-area: quote;
	isolation: isolate;
	justify-self: center;
	width: min(100%, 290px);
	padding: 20px;
	transform: rotate(-5deg);
	text-align: center;
}

.lg-hero__quote p {
	margin: 0;
	color: var(--lg-pink-700);
	font-family: var(--lg-font-handwritten);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.12;
	text-wrap: balance;
}

.lg-hero__quote--placeholder {
	border: 1px dashed var(--lg-border);
	border-radius: var(--lg-radius-lg);
	background: var(--lg-pink-100);
}

.lg-hero__visual {
	position: relative;
	grid-area: visual;
	align-self: stretch;
	min-width: 0;
	min-height: 300px;
}

.lg-hero__photo {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 460px;
	object-fit: contain;
	object-position: center bottom;
}

.lg-hero__photo-placeholder {
	justify-content: flex-end;
	width: 100%;
	height: 100%;
	min-height: 300px;
	padding-bottom: 35px;
	background: linear-gradient(160deg, var(--lg-pink-100), var(--lg-pink-50));
}

.lg-hero-offer {
	position: relative;
	z-index: 1;
	grid-area: visual;
	align-self: start;
	justify-self: end;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 142px;
	min-height: 180px;
	margin-top: -14px;
	padding: 20px 16px;
	color: var(--lg-pink-700);
	text-align: center;
	filter: drop-shadow(0 5px 8px rgb(233 30 140 / 8%));
}

.lg-hero-offer::before,
.lg-hero-offer::after {
	position: absolute;
	inset: 0;
	z-index: -2;
	clip-path: var(--lg-sticker-shape);
	background: var(--lg-gold);
	content: "";
}

.lg-hero-offer::after {
	inset: 3px;
	z-index: -1;
	background: var(--lg-pink-100);
}

.lg-hero-offer > .lg-icon:first-child {
	width: 28px;
	height: 28px;
}

.lg-hero-offer > .lg-icon:last-child {
	width: 16px;
	height: 16px;
}

.lg-hero-offer p {
	margin: 0;
}

.lg-hero-offer strong {
	display: block;
	font-family: var(--lg-font-heading);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
}

.lg-hero-offer p span {
	display: block;
	margin-block: 5px;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

.lg-benefits {
	grid-area: benefits;
	min-width: 0;
	padding-block: 4px 24px;
}

.lg-benefits__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lg-benefits__item {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.lg-benefits__icon {
	display: grid;
	flex: 0 0 38px;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--lg-pink-100);
	color: var(--lg-pink-700);
}

.lg-benefits__text {
	display: flex;
	flex-direction: column;
	font-size: 0.75rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.lg-benefits__text strong {
	font-weight: 700;
}

.lg-hero__decor {
	position: absolute;
	top: 0;
	z-index: -1;
	width: clamp(80px, 12vw, 220px);
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

.lg-hero__decor--left {
	left: 0;
	object-position: left center;
}

.lg-hero__decor--right {
	right: 0;
	object-position: right center;
}

.lg-hero__decor-placeholder {
	position: absolute;
	top: 8px;
	max-width: 45%;
	padding: 2px 8px;
	border: 1px dashed var(--lg-border);
	border-radius: var(--lg-radius-pill);
	color: var(--lg-text-soft);
	font-size: 0.625rem;
	line-height: 1.4;
}

.lg-hero__decor-placeholder--left {
	left: 8px;
}

.lg-hero__decor-placeholder--right {
	right: 8px;
}

@media (min-width: 768px) {
	.lg-hero__layout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas: "brand brand" "quote visual" "benefits benefits";
		gap: 24px;
	}

	.lg-hero__brand {
		width: min(100%, 580px);
		justify-self: center;
	}

	.lg-hero__quote {
		align-self: center;
		width: 240px;
		padding: 30px;
	}

	.lg-hero__quote p {
		font-size: 2.5rem;
	}

	.lg-hero-offer {
		width: 156px;
		min-height: 200px;
	}

	.lg-benefits__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}

	.lg-benefits__icon {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
	}
}

@media (min-width: 1100px) {
	.lg-hero__layout {
		grid-template-columns: minmax(0, 42fr) minmax(0, 40fr) minmax(160px, 18fr);
		grid-template-rows: minmax(260px, 1fr) auto;
		grid-template-areas: "visual brand offer" "visual benefits benefits";
		gap: 14px 20px;
		min-height: 380px;
		padding-top: 28px;
	}

	.lg-hero__brand {
		width: 100%;
	}

	.lg-hero__logo-placeholder {
		min-height: 190px;
	}

	.lg-hero__tagline {
		margin-top: 12px;
		padding-block: 8px;
	}

	.lg-hero__quote {
		z-index: 1;
		grid-area: visual;
		align-self: start;
		justify-self: start;
		width: 148px;
		margin-top: 24px;
		padding: 24px 14px;
	}

	.lg-hero__quote p {
		font-size: 2rem;
	}

	.lg-hero__visual {
		min-height: 352px;
	}

	.lg-hero__photo {
		position: absolute;
		inset: 0;
		max-height: none;
		object-position: right bottom;
		mask-image: linear-gradient(to right, #000 85%, transparent);
	}

	.lg-hero__photo-placeholder {
		border-bottom: 0;
		border-radius: var(--lg-radius-lg) var(--lg-radius-lg) 0 0;
	}

	.lg-hero-offer {
		grid-area: offer;
		align-self: center;
		justify-self: center;
		width: 100%;
		max-width: 210px;
		min-height: 240px;
		margin: 0;
		padding: 26px 20px;
	}

	.lg-hero-offer > .lg-icon:first-child {
		width: 40px;
		height: 40px;
	}

	.lg-hero-offer strong {
		font-size: 4rem;
	}

	.lg-hero-offer p span {
		font-size: 0.875rem;
	}

	.lg-benefits {
		align-self: end;
		padding-bottom: 22px;
	}

	.lg-benefits__list {
		gap: 12px;
	}
}