@import "variables";
@import "mediaqueries";

#main-nav {
  width: 100%;
  text-align: center;
  background-color: #efefef;

  .wrapper {
    width: $content-width;
    max-width: $content-max-width;
    margin: 0 auto;
  }

  ul {
    @include media-max(large) {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    li {
      @include media-min(large) {
        display: inline;
      }

      @include media-max(large) {
        display: block;
      }

      a {
        display: inline-block;
        padding: 1.5rem 2rem;
        text-decoration: none;
        color: $text-color-discreet;

        @include media-max(large) {
          display: block;
          text-align: center;
          padding-left: 0;
          padding-right: 0;
        }

        @include media-max(small) {
          font-size: 0.85rem;
        }

        &.active {
          color: $text-color-body;
          border-bottom: 2px solid #4ea2df;
        }
      }
    }
  }
}