.herocards-block {
	padding: 0 20px;
}

.herocards-block_wrap {
	position: relative;
	padding-top: 90px;
	overflow: hidden;
	border-radius: 6px;
	background: var(--green-main, #748039);
}

.herocards-deco {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

.herocards-deco__path {
	fill: none;
}

.herocards__header {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(16px, 2vw, 24px);

}

.herocards__label.section-label {
	color: rgba(255, 255, 255, 0.75);
	border-color: rgba(255, 255, 255, 0.22);
	background: transparent;
}

.herocards__title {
	margin: 0;
	color: var(--color-white, #fff);
	font-family: var(--font-base);
	font-size: var(--fs-h1);
	font-weight: var(--fw-medium);
	line-height: 1.06;
	letter-spacing: -0.03em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 0.28em;
	max-width: 540px;
	margin: 0 auto;
	color: var(--white, #FFF);
	text-align: center;
	font-size: 74px;
	font-style: normal;
	font-weight: 500;
	line-height: 74px;
	letter-spacing: -1.48px;
}

.herocards__word {
	display: block;
}

.herocards__desc {
	max-width: clamp(320px, 48vw, 620px);
}

.herocards__desc p {
	color: var(--white, #FFF);
	text-align: center;
	opacity: 0.7;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 140%;
	margin: 0;
}

.herocards__deck {
	position: relative;
	z-index: 2;
	margin-top: 0;
	height: clamp(280px, 36vw, 460px);
	width: 100%;
	bottom: -58px;
	margin-top: -60px;
}

.herocards__card {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 256px;
	height: 353px;
	overflow: hidden;


	transform-origin: bottom center;
	transform: translateX(-50%) translateY(40px) rotate(0deg);
	opacity: 0;
	transition:
		transform 0.75s cubic-bezier(0.34, 1.4, 0.64, 1),
		opacity 0.5s ease;
	border-radius: 12px;
	border-radius: 12px;
	border: 1px solid var(--black, #191919);

}

.herocards__deck.is-fanned .herocards__card {
	opacity: 1;
	transform:
		translateX(calc(-50% + var(--fan-tx, 0px))) translateY(var(--fan-ty, 0px)) rotate(var(--fan-rot, 0deg));
}

.herocards__card--image {
	padding: 0;
}

.herocards__card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.herocards__card--text {
	background: #fff;
	padding: clamp(16px, 2vw, 28px);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.herocards__card-eyebrow {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: clamp(8px, 1vw, 14px);
}

.herocards__card-eyebrow-text {
	font-family: var(--font-base);
	font-size: clamp(40px, 5vw, 68px);
	font-weight: var(--fw-bold);
	color: var(--color-black, #191919);
	line-height: 1;
	letter-spacing: -0.04em;
}

.herocards__card-eyebrow-icon {
	display: flex;
	align-items: center;
}

.herocards__card-eyebrow-icon img {
	width: clamp(20px, 2.5vw, 34px);
	height: auto;
	display: block;
}

.herocards__card-label {
	font-family: var(--font-base);
	font-size: clamp(13px, 1.4vw, 18px);
	font-weight: var(--fw-medium);
	color: var(--color-black, #191919);
	line-height: 1.3;
	margin: 0;
}

.herocards__card-sublabel {
	font-family: var(--font-base);
	font-size: clamp(11px, 1.2vw, 15px);
	color: var(--color-gray-500);
	margin: 4px 0 0;
}

@media (max-width: 767px) {
	.herocards__deck {
		height: clamp(200px, 65vw, 300px);
	}

	.herocards__card {
		width: clamp(120px, 38vw, 190px);
	}
	.herocards__title{
		color: var(--white, #FFF);
text-align: center;
font-size: 48px;
font-style: normal;
font-weight: 500;
line-height: 50px; /* 104.167% */
letter-spacing: -0.96px;
	}
	.herocards-block{
		    padding: 0 8px;
	}
	.herocards-block_wrap .container{
		padding-inline: 8px;
	}
}
/* Tablet: the 74px hero title overflows/wraps hard at iPad widths. */
@media (min-width: 768px) and (max-width: 1024px) {
	.herocards__title {
		font-size: 56px;
		line-height: 1.02;
	}
}