:root {
	--eb-wine: #9f1f49;
	--eb-wine-dark: #86183d;
	--eb-blush: #fbf1f1;
	--eb-ink: #171316;
}

.eb-categories {
	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 20px 18px;
	text-align: center;
}

.eb-categories *,
.eb-categories *::before,
.eb-categories *::after { box-sizing: border-box; }

.eb-categories h2 {
	margin: 0 0 20px;
	color: var(--eb-ink);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(26px, 2.2vw, 34px);
	font-weight: 400;
	line-height: 1.2;
}

.eb-categories__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 18px;
}

.eb-category {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 214px;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #eadfdf;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(65, 35, 43, .09);
	color: var(--eb-ink);
	text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.eb-category:hover,
.eb-category:focus-visible {
	border-color: #d8a1b3;
	box-shadow: 0 10px 24px rgba(104, 40, 61, .15);
	color: var(--eb-wine-dark);
	transform: translateY(-4px);
}

.eb-category:focus-visible { outline: 3px solid rgba(159, 31, 73, .22); outline-offset: 3px; }

.eb-category__photo {
	display: block;
	width: 100%;
	height: 102px;
	flex: 0 0 102px;
	background-image: var(--eb-sheet);
	background-repeat: no-repeat;
	background-size: 300% 200%;
}

.eb-category__photo--1 { background-position: 0 0; }
.eb-category__photo--2 { background-position: 50% 0; }
.eb-category__photo--3 { background-position: 100% 0; }
.eb-category__photo--4 { background-position: 0 100%; }
.eb-category__photo--5 { background-position: 50% 100%; }
.eb-category__photo--6 { background-position: 100% 100%; }

.eb-category__photo--dynamic {
	background-image: var(--eb-cover);
	background-position: center;
	background-size: cover;
}

.eb-category__icon {
	position: absolute;
	top: 80px;
	left: 50%;
	display: grid;
	width: 45px;
	height: 45px;
	place-items: center;
	border: 1px solid #efd8df;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 3px 8px rgba(88, 38, 53, .08);
	color: var(--eb-wine);
	transform: translateX(-50%);
}

.eb-category__icon svg {
	width: 25px;
	height: 25px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.45;
}

.eb-category__icon img {
	display: block;
	width: 29px;
	height: 29px;
	border-radius: 50%;
	object-fit: cover;
}

.eb-category__icon i {
	display: block;
	color: currentColor;
	font-size: 23px;
	font-style: normal;
	line-height: 1;
}

.eb-category__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-start;
	padding: 31px 10px 13px;
}

.eb-category__body strong {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.18;
}

.eb-category__body small {
	display: block;
	color: #3f393b;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
}

.eb-category__body small:empty { display: none; }

.eb-categories__all {
	display: inline-flex;
	min-width: 230px;
	min-height: 40px;
	align-items: center;
	justify-content: center;
	gap: 22px;
	margin-top: 18px;
	padding: 9px 22px;
	border: 1px solid var(--eb-wine);
	border-radius: 5px;
	color: var(--eb-wine) !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background .2s ease, color .2s ease;
}

.eb-categories__all span { font-size: 22px; font-weight: 300; line-height: 12px; }
.eb-categories__all:hover,
.eb-categories__all:focus-visible { background: var(--eb-wine); color: #fff !important; }

@media (max-width: 1024px) {
	.eb-categories__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.eb-category__photo { height: 130px; flex-basis: 130px; }
	.eb-category__icon { top: 108px; }
}

@media (max-width: 640px) {
	.eb-categories { padding-inline: 16px; overflow: hidden; }
	.eb-categories h2 { margin-bottom: 16px; }
	.eb-categories__grid {
		grid-template-columns: repeat(6, minmax(210px, 76vw));
		gap: 13px;
		overflow-x: auto;
		padding: 2px 2px 14px;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.eb-categories__grid::-webkit-scrollbar { display: none; }
	.eb-category { min-height: 232px; scroll-snap-align: center; }
	.eb-category__photo { height: 125px; flex-basis: 125px; }
	.eb-category__icon { top: 102px; }
	.eb-category__body { padding-top: 32px; }
}