.promppt-section-nav {
	--promppt-nav-lift: 4px;
	--promppt-nav-speed: 220ms;
	font-family: inherit;
}

.promppt-section-nav__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.promppt-section-nav__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	min-height: 74px;
	padding: 15px 18px;
	background: #fff;
	border: 1px solid #dbe3e8;
	border-radius: 15px;
	box-shadow: 0 4px 15px rgba(35, 56, 89, 0.07);
	color: #233859;
	text-decoration: none;
	transition:
		transform var(--promppt-nav-speed) ease,
		box-shadow var(--promppt-nav-speed) ease,
		border-color var(--promppt-nav-speed) ease,
		background-color var(--promppt-nav-speed) ease;
	will-change: transform;
}

.promppt-section-nav__item:hover,
.promppt-section-nav__item:focus-visible {
	border-color: #57bbce;
	box-shadow: 0 12px 28px rgba(35, 56, 89, 0.14);
	color: #233859;
	text-decoration: none;
}

.promppt-section-nav__item:focus-visible {
	outline: 3px solid rgba(87, 187, 206, 0.38);
	outline-offset: 3px;
}

.promppt-section-nav__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #e9f7fa;
	color: #278ca4;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.02em;
	transition:
		transform var(--promppt-nav-speed) ease,
		background-color var(--promppt-nav-speed) ease,
		color var(--promppt-nav-speed) ease;
}

.promppt-section-nav__title {
	color: #233859;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	transition: color var(--promppt-nav-speed) ease;
}

.promppt-section-nav__arrow {
	color: #278ca4;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	opacity: 0;
	transform: translateX(-7px);
	transition:
		opacity var(--promppt-nav-speed) ease,
		transform var(--promppt-nav-speed) ease;
}

.promppt-section-nav--lift .promppt-section-nav__item:hover,
.promppt-section-nav--lift .promppt-section-nav__item:focus-visible {
	transform: translateY(calc(-1 * var(--promppt-nav-lift)));
}

.promppt-section-nav--lift .promppt-section-nav__item:hover .promppt-section-nav__number,
.promppt-section-nav--lift .promppt-section-nav__item:focus-visible .promppt-section-nav__number {
	transform: rotate(-5deg) scale(1.06);
}

.promppt-section-nav--zoom .promppt-section-nav__item:hover,
.promppt-section-nav--zoom .promppt-section-nav__item:focus-visible {
	transform: scale(1.025);
}

.promppt-section-nav--zoom .promppt-section-nav__item:hover .promppt-section-nav__number,
.promppt-section-nav--zoom .promppt-section-nav__item:focus-visible .promppt-section-nav__number {
	transform: scale(1.08);
}

.promppt-section-nav__item:hover .promppt-section-nav__number,
.promppt-section-nav__item:focus-visible .promppt-section-nav__number {
	background: #278ca4;
	color: #fff;
}

.promppt-section-nav:not(.promppt-section-nav--none) .promppt-section-nav__item:hover .promppt-section-nav__arrow,
.promppt-section-nav:not(.promppt-section-nav--none) .promppt-section-nav__item:focus-visible .promppt-section-nav__arrow {
	opacity: 1;
	transform: translateX(0);
}

@media (max-width: 767px) {
	.promppt-section-nav__grid {
		grid-template-columns: 1fr;
	}

	.promppt-section-nav__item {
		min-height: 68px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.promppt-section-nav__item,
	.promppt-section-nav__number,
	.promppt-section-nav__title,
	.promppt-section-nav__arrow {
		transition-duration: 0.01ms !important;
	}

	.promppt-section-nav__item:hover,
	.promppt-section-nav__item:focus-visible,
	.promppt-section-nav__item:hover .promppt-section-nav__number,
	.promppt-section-nav__item:focus-visible .promppt-section-nav__number {
		transform: none !important;
	}
}