@import "../base/variables";
@import "../base/mixins";

.footer {
  padding: 0.5rem 1rem;
  margin-left: auto;
  margin-right: auto;
  background: $dark-gray;
  display: flex;
  justify-content: space-between;
  color: $white;
  font-size: $font-size-xs;
  
  a {
    font-variation-settings: "wght" 400;
  }

  &.light {
    background-color: $light-gray;
    color: $dark-gray;

    a {
      color: $dark-gray;
    }
  }

  &__copyright {
    padding: 0.5rem 1rem;

    a {
      text-decoration: none;
      color: $white;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  &__nav {
    display: flex;
    flex-wrap: wrap;
  }

  @include media-breakpoint-down(md) {
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
  }
}