.g-main-nav__link {
  display: block;
  margin-right: 0em;
  margin-left: -0.9em;
  font-family: sans-serif;
  font-size: 18px;
  color: #ffffff;
  color: var(--g-theme-inverted-color, #ffffff);
  letter-spacing: 0;
  line-height: 20px;
}

.g-main-nav__link__a {
  display: block;
  padding: 1em;
  color: #ffffff;
  color: var(--g-theme-inverted-color, #ffffff);
  text-decoration: none;
}

.g-main-nav__link__a:hover {
  text-decoration: underline;
}

.g-main-nav__link__a--active {
  border-left: solid 0.2em #24a882;
  border-left: solid 0.2em
    var(--g-theme-inverted-nav-active-border-color, #24a882);
  padding-left: 0.8em;
}

.g-main-nav__link__a:focus {
  outline: 3px solid #b53cde;
  outline: 3px solid var(--g-theme-focus-ring-color, #b53cde);
}

@media only screen and (min-width: 48em) {
  .g-main-nav__link {
    display: inline-block;
    margin-right: 1em;
    margin-left: 0px;
    margin-top: 4px;
  }

  .g-main-nav__link:first-child {
    margin-left: 0em;
  }

  .g-main-nav__link:last-child {
    margin-right: 0px;
  }

  .g-main-nav__link__a {
    position: relative;
    display: inline-block;
    padding: 0.6em 1em;
  }

  .g-main-nav__link__a--active {
    border-left: none;
  }

  .g-main-nav__link__a--active::after {
    content: "";
    position: absolute;
    clear: both;
    display: block;
    bottom: 0px;
    left: 1em;
    right: 1em;
    height: 4px;
    background: #24a882;
    background: var(--g-theme-inverted-nav-active-border-color, #24a882);
  }
}