Footer.module.css

.root {
  position: relative;
  top: 150px;
  z-index: 600;
  width: 100%;
  padding-top: var(--margin);
  padding-bottom: var(--margin);
  background-color: var(--processing-blue-dark);
  color: white;
  transition: 0.4s ease;
  align-self: flex-end;

  & h3 {
    margin-bottom: 0.6rem;
    color: inherit;
  }

  & a {
    text-decoration: underline;
  }
  & a:hover {
    color: var(--footer-hover);
  }
}

.root.withSidebar {
  padding-left: var(--col2);
}

.contactWrapper {
  flex-basis: var(--col2);
  font-size: var(--text-small);
  & p {
    margin-bottom: 0;
    font-size: inherit;
  }
  & a {
    font-size: inherit;
  }
}

.socialmediaWrapper {
  flex-basis: var(--col6);

  & > ul {
    display: flex;
    font-size: inherit;

    & li {
      margin-right: var(--gutter);
      font-size: inherit;
    }
  }
}

.disclaimer {
  margin-top: var(--margin-quarter);
  font-size: var(--text-xsmall);
  white-space: pre-wrap;

  & a {
    color: white;
  }
}

@media (--small) {
  .root {
    min-height: auto;
  }

  .root.withSidebar {
    padding-left: var(--margin);
  }

  .contactWrapper {
    flex-basis: var(--col8);
    padding-top: var(--margin);
    padding-bottom: var(--margin);
    font-size: var(--text-xsmall);
  }

  .socialmediaWrapper {
    flex-basis: var(--col8);
    padding-bottom: var(--margin);
    font-size: var(--text-xsmall);

    & ul {
      flex-wrap: wrap;
      padding-bottom: var(--margin);
      font-size: var(--text-xsmall);
      text-align: center;
    }
  }
}