.header {
  padding: 20px 10px;
}

.header-grid {
  @include flex(30px, space-between);

  @media only screen and (max-width:500px) {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;


    .nav a {
      display: none;
    }
  }
}

.nav {
  display: flex;
  gap: 30px;
  align-items: center;

  a {
    color: $main;

    &:not(.btn2)::after {
      content: "";
      @include detail(0, 1px, $main);
      transition: .3s;
    }

    &:hover {
      &::after {
        width: 100%;
      }
    }
  }

}

.btn2 {
  font-size: rem(14);
  padding: 10px 10px 7px;
  box-shadow: 0 0 0 1px $main inset;
  text-transform: uppercase;
  max-width: fit-content;

  &:hover {
    box-shadow: 0 0 10px 20px $main inset;
    color: $light;
  }
}