.jfs-showcase {
	--jfs-accent: #c99955;
	--jfs-image-width: 29%;
	--jfs-gap: 38px;
	--jfs-main-icon: 84px;
	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--jfs-image-width);
	gap: var(--jfs-gap);
	width: 100%;
	padding: 28px 28px 0;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.88);
	border-radius: 16px;
	background: linear-gradient(115deg, #fff 0%, #fbf9f6 62%, #f3eee6 100%);
	box-shadow: 0 11px 28px rgba(49, 39, 28, .09);
}

.jfs-showcase--image-left {
	grid-template-columns: var(--jfs-image-width) minmax(0, 1fr);
}

.jfs-showcase--image-left .jfs-image { grid-column: 1; grid-row: 1; }
.jfs-showcase--image-left .jfs-body { grid-column: 2; }

.jfs-body {
	position: relative;
	z-index: 2;
	align-self: center;
	padding-bottom: 28px;
}

.jfs-intro {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.jfs-main-icon {
	box-sizing: border-box;
	width: var(--jfs-main-icon);
	height: var(--jfs-main-icon);
	display: grid;
	flex: 0 0 var(--jfs-main-icon);
	place-items: center;
	border: 1px solid #e3c8a2;
	border-radius: 50%;
	color: #c99955;
	font-size: calc(var(--jfs-main-icon) * .42);
}

.jfs-main-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.jfs-copy { max-width: 690px; }
.jfs-eyebrow { margin-bottom: 5px; color: var(--jfs-accent); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.jfs-title { margin: 4px 0 0; color: #181818; font-family: Georgia, "Times New Roman", serif; font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; line-height: 1.15; }
.jfs-title-line { display: block; width: 34px; height: 1px; margin: 12px 0 10px; background: var(--jfs-accent); }
.jfs-description { color: #343434; font-size: 14px; line-height: 1.6; }

.jfs-benefits {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin-top: 28px;
}

.jfs-benefit {
	min-width: 0;
	padding: 0 15px;
	text-align: center;
	border-left: 1px solid rgba(201,153,85,.22);
}

.jfs-benefit:first-child { border-left: 0; }
.jfs-benefit__icon { height: 35px; display: grid; place-items: center; margin-bottom: 8px; color: var(--jfs-accent); font-size: 28px; }
.jfs-benefit__icon svg { display: block; width: 1em; height: 1em; fill: currentColor; }
.jfs-benefit__text { color: #242424; font-size: 12px; line-height: 1.45; }

.jfs-image {
	position: relative;
	z-index: 2;
	align-self: end;
	height: 330px;
	min-width: 0;
}

.jfs-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

.jfs-decoration {
	position: absolute;
	z-index: 1;
	border: 14px solid rgba(201,153,85,.11);
	border-radius: 46% 54% 45% 55%;
	pointer-events: none;
}

.jfs-decoration--one { width: 190px; height: 310px; right: -74px; bottom: -115px; transform: rotate(18deg); }
.jfs-decoration--two { width: 142px; height: 250px; right: -46px; bottom: -87px; transform: rotate(8deg); opacity: .55; }
.jfs-showcase--image-left .jfs-decoration--one { right: auto; left: -74px; }
.jfs-showcase--image-left .jfs-decoration--two { right: auto; left: -46px; }

@media (max-width: 1024px) {
	.jfs-showcase { --jfs-image-width: 34%; --jfs-gap: 22px; }
	.jfs-intro { gap: 18px; }
	.jfs-benefit { padding: 0 9px; }
}

@media (max-width: 767px) {
	.jfs-showcase,
	.jfs-showcase--image-left {
		--jfs-main-icon: 66px;
		display: flex;
		flex-direction: column;
		gap: 22px;
		padding: 24px 20px 0;
	}

	.jfs-body,
	.jfs-showcase--image-left .jfs-body {
		order: 1;
		width: 100%;
		padding-bottom: 0;
	}

	.jfs-image,
	.jfs-showcase--image-left .jfs-image {
		order: 2;
		width: min(100%, 340px);
		height: 280px;
		margin: 0 auto;
	}

	.jfs-intro { gap: 15px; }
	.jfs-copy { min-width: 0; }
	.jfs-title { font-size: 23px; }
	.jfs-description { font-size: 13px; line-height: 1.55; }
	.jfs-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 24px; border-top: 1px solid rgba(201,153,85,.18); }
	.jfs-benefit { padding: 16px 10px; border-left: 0; border-bottom: 1px solid rgba(201,153,85,.18); }
	.jfs-benefit:nth-child(even) { border-left: 1px solid rgba(201,153,85,.18); }
	.jfs-benefit__text { font-size: 11px; }
}

@media (max-width: 420px) {
	.jfs-intro { display: block; }
	.jfs-main-icon { margin-bottom: 18px; }
	.jfs-title { font-size: 22px; }
}