footer.footer {
  position: relative;
  padding: calc(25/10 * 1rem) calc(25/10 * 1rem);

  @media (min-width: calc(1200/16 * 1rem)) {
    padding: calc(58/10 * 1rem) calc(83/10 * 1rem);
  }
}

.footer__background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.footer__inner {
  background: white;
  border-radius: calc(40/10 * 1rem);
  overflow: hidden;
  position: relative;

  display: flex;
  flex-direction: column;
  padding-block: 1.5rem;


  --outer-padding: calc(20/10 * 1rem);
  --inner-padding: calc(20/10 * 1rem);


  @media (min-width: calc(768/16 * 1rem)) {
    flex-direction: row;

    --outer-padding: calc(30/10 * 1rem);
    --inner-padding: calc(20/10 * 1rem);
  }

  @media (min-width: calc(992/16 * 1rem)) {
    --outer-padding: calc(66 / 10 * 1rem);
    --inner-padding: calc(40 / 10 * 1rem);

    padding-block: calc(35/10 * 1rem) calc(38/10 * 1rem);
  }

}

.footer__left {
  padding-inline: var(--outer-padding) var(--inner-padding);

  @media (min-width: calc(768/16 * 1rem)) {
    flex: 0 0 50%;
    text-align: left;
    border-right: 1px solid black;
  }

  .region-footer-branding {
    margin-bottom: calc(20/10 * 1rem);
  }

  ul.menu--footer {
    margin: 0;
    padding: 0;

    justify-content: flex-start;

    li {

      &:after {
        content: " | ";
      }

      &:last-child:after {
        content: none;
      }

      a {
        color: black;
        margin: 0 5px;
        font-family: var(--font-family--lexend);
        font-size: calc(14/10 * 1rem);
        line-height: calc(24/10 * 1rem);
        letter-spacing: 0;
      }

      &:first-child a {
        margin-left: 0;
      }
    }

  }

  p {
    font-family: var(--font-family--lexend);
    font-size: calc(14/10 * 1rem);
    line-height: calc(24/10 * 1rem);
    letter-spacing: 0;
    color: black;

    &:last-child {
      margin-bottom: 0;
    }
  }

}

.footer__right {
  padding-inline: var(--inner-padding) var(--outer-padding);

  margin-top: calc(35/10 * 1rem);

  @media (min-width: calc(768/16 * 1rem)) {
    flex: 0 0 50%;
    margin-top: 0;
  }

  h2 {
    font-weight: 700;
    font-family: var(--font-family--roboto-flex);
    font-size: calc(24/10 * 1rem);
    line-height: 1.1;
    letter-spacing: calc(0.3/10 * 1rem);
    margin-bottom: calc(25/10 * 1rem);
  }

  p {
    font-family: var(--font-family--lexend);
    font-size: calc(18/10 *1rem);
    line-height: calc(30/10 * 1rem);
    letter-spacing: calc(0.3/10 * 1rem);

    &:last-child {
      margin-bottom: 0;
    }
  }
}