.cux-footer-communicate {
  @include font-size(45);
  background: $color-blue-300;
  color: $color-white;
  text-align: center;
  padding: $margin-normal 0 $margin-double;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  width: auto;

  a:hover {
    text-decoration: none;
  }

  h3,
  p,
  .tui-smartphone-app,
  .tui-newsletter {
    display: none;
  }

  .pictogram {
    &:not(.pictogram-tui-smile) {
      color: $color-white;
      height: 1.5em;
      width: 1.5em;
    }
  }

  @include breakpoint(lg) {
    background: $color-white;
    color: $color-blue-300;

    h3,
    p {
      @include font-size(14);
      display: block;
    }

    h3 {
      color: $text-color;
      text-transform: uppercase;
      letter-spacing: .05em;
      font-weight: bold;
    }

    .pictogram {
      &:not(.pictogram-tui-smile) {
        color: $color-blue-300;
      }
    }
  }

  @include breakpoint(sm) {
    .container {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: baseline;

      > a,
      > div {
        width: percentage(1 / 3);
        text-align: center;
        display: block;
      }
    }

    .tui-smartphone-app,
    .tui-newsletter {
      display: block;
    }

    .mail {
      display: none;
    }
  }
}