.tui-important-info {
  display: flex;
  align-items: flex-start;
  background: $color-white;
  padding: $margin-normal;
  border-radius: $margin-double;

  @include breakpoint(sm) {
    padding: $margin-double;
  }

  .heading {
    @include font-size(18);
    margin-bottom: 0;

    @include breakpoint(sm) {
      @include font-size(24);
    }
  }

  .pictogram-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to top, #ffb700, $color-yellow);
    padding: $margin-half;
    border-radius: 50%;
    margin-right: $margin-normal;

    @include breakpoint(sm) {
      margin-right: $margin-double;
    }
  }

  .pictogram {
    color: $color-white;
    width: $margin-double;
    height: $margin-double;

    @include breakpoint(sm) {
      width: $margin-triple;
      height: $margin-triple;
    }
  }

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