.hhmwh {
	--hhmwh-card: #fffdf9;
	--hhmwh-title: #2f2b27;
	--hhmwh-text: #47413b;
	--hhmwh-icon: #c55d37;
	--hhmwh-decoration: #d0714e;
	--hhmwh-button-text: #fff;
	--hhmwh-button-border: #efd0c2;
	--hhmwh-button-hover: #fff;
	--hhmwh-button-hover-text: #9c3d1e;
	position: relative;
	overflow: hidden;
	background: #ad4825;
	color: #fff;
	padding: 22px 48px 18px;
	font-family: Arial, sans-serif;
}

.hhmwh * { box-sizing: border-box; }
.hhmwh a { text-decoration: none; }
.hhmwh__inner { position: relative; z-index: 2; width: 100%; max-width: 1260px; margin: 0 auto; }
.hhmwh__heading { margin: 0 0 17px; text-align: center; color: #fffaf4; font-family: Georgia, "Times New Roman", serif; font-size: 36px; font-weight: 500; line-height: 1.1; }
.hhmwh__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.hhmwh-card {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	min-width: 0;
	overflow: hidden;
	padding: 21px 24px;
	background: var(--hhmwh-card);
	border: 1px solid #eaded6;
	border-radius: 8px;
	color: var(--hhmwh-text);
	box-shadow: 0 4px 10px rgba(74, 29, 15, .18);
	transition: transform .2s ease, box-shadow .2s ease;
}

.hhmwh-card__icon { display: flex; align-items: center; justify-content: center; color: var(--hhmwh-icon); font-size: 48px; line-height: 1; }
.hhmwh-card__icon i { color: inherit; }
.hhmwh-card__icon svg { display: block; width: 48px; height: 48px; fill: currentColor; }
.hhmwh-card__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.hhmwh-card__title { display: block; margin: 0 0 7px; color: var(--hhmwh-title); font-size: 14px; font-weight: 800; line-height: 1.15; letter-spacing: .025em; }
.hhmwh-card__description { display: block; color: var(--hhmwh-text); font-size: 14px; line-height: 1.45; }
.hhmwh-card--linked:hover,
.hhmwh-card--linked:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(74, 29, 15, .25); }
.hhmwh-card--linked:focus-visible,
.hhmwh__button:focus-visible { outline: 3px solid rgba(255, 255, 255, .8); outline-offset: 3px; }
.hhmwh__button-wrap { margin-top: 17px; text-align: center; }

.hhmwh__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--hhmwh-button-border);
	border-radius: 3px;
	padding: 11px 25px;
	color: var(--hhmwh-button-text);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .035em;
	text-transform: uppercase;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.hhmwh__button:hover { background: var(--hhmwh-button-hover); color: var(--hhmwh-button-hover-text); transform: translateY(-1px); }
.hhmwh__heart { display: none; position: absolute; z-index: 1; color: var(--hhmwh-decoration); font-family: Georgia, "Times New Roman", serif; font-size: 77px; font-weight: 400; line-height: 1; opacity: .72; transform: rotate(-11deg); pointer-events: none; }
.hhmwh--decorated .hhmwh__heart { display: block; }
.hhmwh__heart--left { left: 4%; top: 22px; }
.hhmwh__heart--right { right: 3.5%; top: 72px; transform: rotate(12deg); }
.hhmwh::before,
.hhmwh::after { content: ""; display: none; position: absolute; z-index: 1; width: 170px; height: 60px; border-top: 1px solid var(--hhmwh-decoration); opacity: .32; pointer-events: none; }
.hhmwh--decorated::before,
.hhmwh--decorated::after { display: block; }
.hhmwh::before { left: -25px; bottom: 18px; transform: rotate(-8deg); }
.hhmwh::after { right: -15px; bottom: 12px; transform: rotate(8deg); }

@media (max-width: 1024px) {
	.hhmwh { padding: 34px 28px 30px; }
	.hhmwh__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hhmwh__heart { opacity: .38; }
	.hhmwh__heart--left { left: 1.5%; }
	.hhmwh__heart--right { right: 1.5%; }
}

@media (max-width: 767px) {
	.hhmwh { padding: 32px 18px 30px; }
	.hhmwh__heading { margin-bottom: 22px; font-size: 31px; }
	.hhmwh__cards { grid-template-columns: 1fr; gap: 13px; }
	.hhmwh-card { grid-template-columns: 54px minmax(0, 1fr); gap: 13px; padding: 18px; }
	.hhmwh-card__icon { font-size: 40px; }
	.hhmwh-card__icon svg { width: 40px; height: 40px; }
	.hhmwh__button { width: 100%; max-width: 330px; padding: 14px 18px; }
	.hhmwh__heart { font-size: 56px; }
	.hhmwh__heart--left { top: 10px; left: -3px; }
	.hhmwh__heart--right { top: auto; right: -3px; bottom: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.hhmwh * { transition: none !important; }
}
