.nav {
	display: flex;
	gap: 1rem;
}


@media screen and (max-width: 900px) {
	.nav__desktop {
		display: none;
	}
}

@media screen and (min-width: 901px) {
	.nav__mobile {
		display: none;
	}
}

.nav__list {
	display: flex;
}

.nav__item {
	list-style: none;
}

.nav__link {
	color: #222;
	font-weight: 500;
	text-decoration: none;
}

.nav__mobile-list {
	display: flex;
	position: fixed;
	top: 0;
	left: 100vw;
	width: 100vw;
	height: 100vh;
	transition: left 0.5s;
	align-items: center;
	justify-content: center;
}

.nav__mobile-list--active {
	left: 0vw;
}

.nav__mobile-item {
	margin-bottom: 0.8rem;
}