.nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: #fff;
}

.nav__link {
  position: relative;
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  line-height: 22px;
  letter-spacing: 1px;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -8px;
  display: block;
  height: 1px;
  width: 100%;
  background-color: #fff;
  transition: transform var(--effect-duration);
  transform: scale(0);
  transform-origin: left;
}

@media (min-width: 1024px) {
  .nav__link:hover::after {
    transform: scaleX(1);
  }

  .nav__link {
    font-size: 18px;
  }

  .nav__list {
    flex-direction: row;
  }
}