.header {
  @include page-content();
  padding-top: 2rem;
  padding-bottom: 1rem;
  text-transform: lowercase;
  font-size: 2rem;

  @media screen and (min-width: $screen-md) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 3rem;
  }
  .links {
    @include heading-font();
    justify-self: flex-end;
    @media (min-width: $screen-md) {
      display: flex;
    }
    a {
      font-weight: normal;
    }
    div {
      margin-bottom: 1rem;
      @media (min-width: $screen-md) {
        margin-left: 3rem;
        margin-bottom: 0;
      }
    }
  }
  .home-icon {
    margin-bottom: 1.2rem;
    width: 2.1rem;
    height: 2.1rem;
    fill: var(--color);
    @media (min-width: $screen-md) {
      width: 2.25rem;
      height: 2.25rem;
    }
  }

  a {
    position: relative;
    display: inline-block;

    &::after {
      content: '';
      height: 0.2rem;
      position: absolute;
      bottom: -0.3rem;
      left: 0;
      transition: transform 0.2s;
      transform: scaleX(0);
      width: 100%;
      background-color: var(--color);
      transform-origin: 0 50%;
    }

    &:hover::after {
      transform: scaleX(1);
    }
  }
}
