.feature-grid {
	display: grid;
	grid-template-columns: var(--feature-columns, repeat(3, minmax(0, 1fr)));
	grid-auto-rows: minmax(var(--feature-row, 251px), auto);
	gap: var(--feature-gap, 27px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.feature-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 35px 30px 40px 36px;
	background: var(--gradient-case-card);
	border: 1.5px solid var(--color-sand);
	border-radius: 20px;
	box-shadow: 0 4px 2px color-mix(in srgb, var(--color-black) 15%, transparent);
}
.feature-card__title {
	margin: 0;
	max-width: 248px;
	font: 700 var(--text-lg) / 1.1 var(--font-sans);
	letter-spacing: normal;
	color: var(--color-brand);
}
.feature-card__text {
	margin: 0;
	max-width: 261px;
	font: var(--body-m);
	color: var(--color-cream);
}
.feature-grid__track {
	display: contents;
}
.feature-grid__controls {
	display: none;
}
.feature-grid__media {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	border-radius: 20px;
	box-shadow: 0 4px 4px color-mix(in srgb, var(--color-black) 15%, transparent);
}
.feature-grid__media--tall {
	grid-row: span 2;
	contain: size;
}
.feature-grid__media--wide {
	grid-column: span 2;
	aspect-ratio: 668 / 262;
}
@media (max-width: 1099px) {
	.feature-grid {
		grid-template-columns: var(--feature-columns, repeat(2, minmax(0, 1fr)));
	}
}
@media (max-width: 767px) {
	.feature-grid {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.feature-grid__track {
		display: flex;
		gap: 12px;
		margin-inline: -32px;
		padding-inline: 32px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 32px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.feature-grid__track::-webkit-scrollbar {
		display: none;
	}
	.feature-card {
		flex: 0 0 280px;
		width: 280px;
		padding: 28px 24px;
		gap: 12px;
		scroll-snap-align: start;
	}
	.feature-card__title {
		max-width: none;
		letter-spacing: var(--ls-display);
	}
	.feature-card__text {
		max-width: none;
		font-size: var(--text-sm);
	}
	.feature-grid__controls {
		display: block;
		margin-top: 4px;
		margin-bottom: 16px;
		--carousel-dot-color: color-mix(in srgb, var(--color-cream) 35%, transparent);
		--carousel-dot-radius: 1px;
	}
	.feature-grid__dots {
		display: flex;
		justify-content: center;
		gap: 14px;
	}
	.feature-grid__hint {
		margin: 10px 0 0;
		font: 400 var(--text-2xs) / 1.35 var(--font-sans);
		color: var(--color-cream);
		text-align: center;
	}
	.feature-grid__media {
		grid-row: auto;
		grid-column: auto;
		contain: none;
		height: 280px;
		aspect-ratio: auto;
		object-fit: cover;
		object-position: center;
		border-radius: 20px;
	}
}