.story-grid {
	display: grid;
	grid-template-columns: var(--story-columns, repeat(2, minmax(0, 1fr)));
	gap: var(--story-gap, 47px);
	margin: 0;
	counter-reset: story;
	padding: 50px 0 0;
	list-style: none;
}
.story-card {
	position: relative;
	counter-increment: story;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 44px 32px 32px;
	background: var(--gradient-case-story);
	border: 1.5px solid var(--color-sand);
	border-radius: 20px;
	font: var(--body-m);
	color: var(--color-cream);
}
.story-card > * {
	margin: 0;
}
.story-card > p + p {
	margin-top: calc(1.35em - 16px);
}
.story-card::before {
	content: counter(story);
	position: absolute;
	top: -50px;
	left: 35px;
	display: grid;
	place-items: center;
	width: 63px;
	height: 61px;
	box-sizing: border-box;
	background: var(--gradient-step);
	border: 2px solid var(--color-cream);
	border-radius: 10px;
	font: var(--label-int);
	letter-spacing: var(--ls-label);
	text-indent: var(--ls-label);
	color: var(--color-cream);
}
.story-card__title {
	max-width: 395px;
	font: 700 var(--text-lg) / 1.1 var(--font-sans);
	letter-spacing: normal;
	color: var(--color-brand);
}
@media (max-width: 767px) {
	.story-grid {
		grid-template-columns: var(--story-columns, minmax(0, 1fr));
		row-gap: 16px;
		padding-top: 0;
	}
	.story-card {
		gap: 14px;
		padding: 24px 24px 28px;
		font-size: var(--text-sm);
	}
	.story-card__title {
		letter-spacing: var(--ls-display);
	}
	.story-card::before {
		position: static;
		width: 44px;
		height: 44px;
		border-width: 1px;
	}
}