.menu.nav-page {
	display: flex;
	align-items: center;
	gap: 1.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
	--size: clamp(1.25rem, calc(1.15rem + 0.5vw), 1.75rem);

	.header-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		a {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.4375rem;
			text-decoration: none;
			padding: 0;
			margin: 0;
			height: var(--size);
			@media (max-width: 900px) {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.block-icon {
			width: var(--size);
			min-width: var(--size);
			max-width: var(--size);
			height: var(--size);
			min-height: var(--size);
			max-height: var(--size);

			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			color: #4a5568;

			svg,
			img {
				width: inherit;
				height: inherit;
				min-width: inherit;
				min-height: inherit;
				max-width: inherit;
				max-height: inherit;
				display: block;
				object-fit: cover;
				margin: 0;
			}

			@media (max-width: 900px) {
				display: flex;
				gap: 0.3125rem;
				&.has-count {
					color: var(--blue);
				}
			}
		}

		@media (max-width: 900px) {
			padding: 0.375rem 0.5rem;
			background-color: #eeeeee;
			border-radius: 100px;
		}
	}

	.count {
		position: absolute;
		top: -0.375rem;
		right: -0.625rem;
		z-index: 1;
		padding: 0.125rem 0.25rem;
		min-width: 1.125rem;
		min-height: 1.125rem;
		background: var(--blue);
		color: #fff;
		font-size: 0.625rem;
		border-radius: 2rem;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		@media (max-width: 900px) {
			position: absolute;
			padding: 0;
			top: -0.83rem;
			right: -0.875rem;
		}
	}

	@media (max-width: 1000px) {
		gap: 1.5rem;
	}
	@media (max-width: 900px) {
		gap: 0.8rem;
	}
}