$icon-size: 2rem;

footer {
  display: flex;
  justify-content: space-between;

  @media (max-width: $sm) {
    flex-direction: column;

    .credits {
      text-align: center;
    }
  }

  .credits {
    p {
      a {
        text-decoration: none;
      }
    }
  }

  .social-links {
    display: flex;
    flex-direction: column;
    justify-content: center;

    ul {
      display: flex;
      list-style: none;
      justify-content: center;
      padding: 0;

      li {
        a {
          text-decoration: none;
          color: $text-color;
          margin: 0.5rem;

          &:hover {
            color: darken($text-color, 10%);
          }

          i {
            line-height: $icon-size;
            font-size: $icon-size;
          }
        }
      }
    }
  }
}