.gb-content-article {
	padding-block: max(6rem, calc(9.25 * var(--su)));
	padding-inline: var(--pk-site-gutter);
	background: var(--color-pistachio);
}

.gb-content-article__inner {
	margin-inline: 0;
	row-gap: max(1rem, calc(1 * var(--su)));
}

.gb-content-article__panel,
.gb-content-article__product-card {
	min-width: 0;
}

.gb-content-article__panel {
	display: flex;
	aspect-ratio: 1;
	flex-direction: column;
	justify-content: space-between;
	gap: max(2rem, calc(2 * var(--su)));
	padding: max(2.5rem, calc(3.5 * var(--su)));
	border-radius: 0 var(--radius-2xl) 0 var(--radius-2xl);
	background: var(--color-cypress);
	color: var(--color-white);
}

.gb-content-article__copy {
	display: flex;
	flex-direction: column;
	gap: max(1.25rem, calc(1.25 * var(--su)));
}

.gb-content-article__heading {
	margin: 0;
	color: currentColor;
	font-size: var(--scaling-h2);
	font-weight: var(--pk-heading-font-weight);
	line-height: 1.2;
}

.gb-content-article__text {
	color: currentColor;
	font-size: var(--desktop-body-md);
	font-weight: var(--pk-text-font-weight);
	line-height: var(--pk-text-line-height);
}

.gb-content-article__text > * {
	margin-block: 0;
}

.gb-content-article__text > * + * {
	margin-top: max(0.75rem, calc(0.75 * var(--su)));
}

.gb-content-article__bullets {
	display: flex;
	flex-direction: column;
	gap: max(0.5rem, calc(0.5 * var(--su)));
	margin: 0;
	padding: 0;
	list-style: none;
	color: currentColor;
	font-size: var(--desktop-body-md);
	font-weight: var(--pk-text-font-weight);
	line-height: var(--pk-text-line-height);
}

.gb-content-article__bullets li {
	position: relative;
	padding-left: max(1.5rem, calc(1.5 * var(--su)));
}

.gb-content-article__bullets li::before {
	position: absolute;
	top: 0.45em;
	left: 0;
	width: max(0.75rem, calc(0.75 * var(--su)));
	height: max(0.75rem, calc(0.75 * var(--su)));
	background: var(--color-lime);
	content: "";
	mask: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5.154 4.214 8.5 11 1.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gb-content-article__cta {
	width: fit-content;
}

.gb-content-article__product-link:focus-visible {
	outline: var(--focus-ring-width) solid var(--pk-focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.gb-content-article__product-card {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 0 var(--radius-2xl) 0 var(--radius-2xl);
	background: var(--color-deep-pine-5);
}

.gb-content-article__product-card picture {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.gb-content-article__product-card img.gb-content-article__product-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
}

.gb-content-article__product-link {
	position: absolute;
	top: max(2rem, calc(2 * var(--su)));
	right: max(2rem, calc(2 * var(--su)));
	z-index: 2;
	display: inline-flex;
	width: max(2.5rem, calc(2.5 * var(--su)));
	height: max(2.5rem, calc(2.5 * var(--su)));
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	background: var(--color-lime);
	transition: background-color var(--transition-duration) var(--transition-easing),
		transform var(--transition-duration) var(--transition-easing);
}

.gb-content-article__product-link span {
	width: max(1.25rem, calc(1.25 * var(--su)));
	height: max(1.25rem, calc(1.25 * var(--su)));
	background-color: var(--color-deep-pine);
	mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.16669 10H15.8334M15.8334 10L10.8334 5M15.8334 10L10.8334 15' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gb-content-article__product-link:hover,
.gb-content-article__product-link:focus-visible {
	background: var(--button-bg-1-hover);
	transform: translateX(max(0.125rem, calc(0.125 * var(--su))));
}

.gb-content-article__product-link:hover span,
.gb-content-article__product-link:focus-visible span {
	background-color: var(--color-white);
}

.gb-content-article__product-caption {
	position: absolute;
	right: max(1.5rem, calc(1.5 * var(--su)));
	bottom: max(1.5rem, calc(1.5 * var(--su)));
	left: max(1.5rem, calc(1.5 * var(--su)));
	z-index: 1;
	padding: max(1.5rem, calc(1.5 * var(--su)));
	border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
	background: var(--color-white);
	color: var(--color-deep-pine);
}

.gb-content-article__product-caption h3 {
	margin: 0;
	color: currentColor;
	font-size: var(--scaling-h5);
	font-weight: var(--pk-heading-font-weight);
	line-height: var(--pk-heading-line-height);
}

@media (max-width: 992px) {
	.gb-content-article {
		padding-block: max(4rem, calc(4 * var(--su)));
		background: var(--color-white);
	}

	.gb-content-article__panel,
	.gb-content-article__product-card {
		grid-column: 1 / -1;
	}

	.gb-content-article__panel {
		aspect-ratio: auto;
		gap: max(2rem, calc(2 * var(--su)));
		padding: max(4rem, calc(4 * var(--su))) max(1.5rem, calc(1.5 * var(--su)));
		border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
	}

	.gb-content-article__heading {
		font-size: var(--scaling-h3);
	}

	.gb-content-article__text,
	.gb-content-article__bullets {
		font-size: var(--desktop-body-sm);
	}

	.gb-content-article__product-card {
		aspect-ratio: 1;
		border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
	}

	.gb-content-article__product-link {
		top: max(1.5rem, calc(1.5 * var(--su)));
		right: max(1.5rem, calc(1.5 * var(--su)));
		width: max(2rem, calc(2 * var(--su)));
		height: max(2rem, calc(2 * var(--su)));
	}

	.gb-content-article__product-caption {
		right: max(1rem, calc(1 * var(--su)));
		bottom: max(1rem, calc(1 * var(--su)));
		left: max(1rem, calc(1 * var(--su)));
		padding: max(1rem, calc(1 * var(--su)));
		border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
	}

	.gb-content-article__product-caption h3 {
		font-size: var(--desktop-body-lg);
	}
}