.footer {
  background-color: var(--footer-background-color);
  color: white;
  padding: 2rem 2rem;
  position: relative;

  @include min(tablet) {
    padding: 5.5rem 3rem;
  }

  @include min(desktop) {
    padding: 5.5rem 4rem;
  }

  > div {
    margin: 0 auto;
    max-width: calc(var(--main-container-max) + var(--side-container));
    @include flex-direction(row);

    &.topPart {
      padding-bottom: 4rem;
      @include flex-direction(column);
      flex-flow: column-reverse;

      @include min(tablet) {
        @include flex-direction(row);
        flex-flow: row-reverse;
      }

      > ul {
        flex-grow: 1;
      }

      > div {
        @include min(tablet) {
          flex-grow: 3;
          flex-basis: 0;
        }
      }

      .links {
        @include flex-direction(row);

        @include min(tablet) {
          padding-top: 7rem;
        }

        @include min(laptop) {
          padding-top: 0;
        }

        > ul {
          padding: 0.5rem;
          flex-grow: 1;
          li {
            padding-bottom: 2rem;

            &:first-child {
              font-weight: 700;
              text-transform: uppercase;
            }

            &:not(:first-child) {
              a {
                @include link-color(white);
              }
            }
          }
        }
      }
    }

    &.bottomPart {
      flex-flow: column;
      flex-direction: column-reverse;
      justify-content: center;
      align-items: center;

      .copyrightDisclaimer {
        padding: 3rem 0;

        @include min(laptop) {
          padding: 3rem 0 0 0;
        }

        p {
          text-align: center;

          &:last-child {
            padding-top: 2rem;
          }
        }
      }

      .logos {
        > ul {
          @include flex-align(center, center);
          flex-wrap: wrap;
          padding-bottom: 3rem;

          @include min(tablet) {
            padding-bottom: 0;
          }

          li {
            padding-right: 1rem;
            padding-bottom: 1rem;

            @include min(tablet) {
              padding-bottom: 2rem;
              padding-right: 2.5rem;
            }

            @include min(laptop) {
              padding-bottom: 0;
            }

            &:first-child {
              img {
                max-width: 3rem;
              }
            }

            img {
              max-width: 9.5rem;

              @include min(tablet) {
                max-width: 13rem;
              }
            }
          }
        }
      }
    }
  }
}
