.footer {
  max-width: 60rem;
  height: 2rem;
  margin: .5rem auto;
  padding: 0 4rem;

  .who {
    float: left;
    color: $f-color;
    font-size: .895rem;

    a {
      color: $link;
      margin: 0 2px;

      &:hover { text-decoration: underline }
    }

    .heart {
      position: relative;
      margin: 0 1px;
    }
  }
  
  .links {
    float: right;
    list-style-type: none;
    white-space:nowrap;
    padding: 0;
    margin: 0;

    li, li p {
      display:inline; 
      font-size: .895rem;
    }

    a {
      color: $link;
      margin: 0 .5rem;

      &:hover { text-decoration: underline }
    }

    p {
      color: $f-color;
      margin: 0 0 0 .5rem;
    }

    .copy .icon-copyright {
      font-size: .7rem;
      opacity: .9;
    }
  }
}

@media only screen and (max-width: 600px) {
  .footer {
    height: unset;
    padding: 0 2.5rem;
    margin: 1rem 0;

    .who,
    .links {
      float: none;
    }

    .links {
      padding: .5rem 0;

      a:first-of-type {
        margin: 0 1rem 0 0;
      }
    }
  }
}

@media only screen and (max-width: 345px) {
  .footer {
    padding: 0 1rem;
  }
}