.tui-top-facts {
  @extend %flexbox-column;
  border: 1px solid $color-beige-300;
  border-radius: $margin-normal;
  padding: 0 $margin-normal;
  margin: 0 0 $margin-enterprise;
  background: inherit;

  @include breakpoint(sm) {
    flex-direction: row;
    margin: 0;
    padding: $margin-double 0;
  }

  @include breakpoint(md) {
    padding: $margin-enterprise 0;
  }

  &.heading-only {
    .text {
      font-weight: bold;
    }
  }

  &.heading-text {
    .text-value {
      flex-direction: column;
    }

    .text {
      font-weight: bold;
    }

    .value {
      margin-left: 0;
      font-weight: normal;
      text-align: left;
    }
  }

  &.heading-text-inverse {
    .text {
      font-weight: normal;
    }

    .value {
      font-weight: bold;
    }
  }

  .tui-top-facts-item {
    @extend %flexbox-row;
    @include font-size(16);
    align-items: center;
    justify-content: center;
    padding: $margin-normal $margin-half $margin-normal 0;
    color: $color-grey;

    &:not(:first-child) {
      border-top: 1px solid $color-beige-300;

      @include breakpoint(sm) {
        border: 0;
      }
    }

    .pictogram {
      margin-right: $margin-normal;
    }

    @include breakpoint(sm) {
      padding: 0 $margin-normal;
      flex-grow: 1;
      margin-bottom: 0;
      flex-direction: column;
      align-items: center;

      &:not(:first-child) {
        border-left: 1px solid $color-beige-300;
        border-bottom: 0;
      }

      .pictogram {
        height: $margin-triple;
        width: $margin-triple;
        margin: 0 0 $margin-normal;
      }
    }

    @include breakpoint(md) {
      flex-direction: row;

      .pictogram {
        margin: 0 $margin-normal 0 0;
      }
    }

    .text-value {
      @extend %flexbox-row;
      flex-grow: 1;
      justify-content: space-between;
      align-items: baseline;

      @include breakpoint (sm) {
        flex-grow: 0;
        flex-direction: column;
        align-items: center;
      }
    }

    .value {
      @include font-size(14);
      font-weight: bold;

      @include breakpoint(sm) {
        @include font-size(18);
        margin-left: 0;
      }
    }
  }

  &.vertical-list {
    .text-value,
    .text,
    .value {
      display: block;
    }
  }
}

.tui-top-facts-cruises-container {
  border-radius: $border-radius-normal;
  background: inherit;
  margin: 0;
  padding: 0;

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

.tui-top-facts-cruises {
  @extend %key-value-list-mobile;
  margin: 0 0 $margin-normal;
  background: inherit;

  @include breakpoint(sm) {
    display: flex;
    flex-direction: row;
    margin: 0;
  }

  &.heading-only {
    .text {
      font-weight: bold;
    }
  }

  &.heading-text {
    .text-value {
      flex-direction: column;
    }

    .text {
      font-weight: bold;
    }

    .value {
      margin-left: 0;
      font-weight: normal;
      text-align: left;

      @include breakpoint(sm) {
        text-align: center;
      }
    }
  }

  &.heading-text-inverse {
    .text {
      font-weight: normal;
    }

    .value {
      font-weight: bold;
    }
  }

  .tui-top-facts-item {
    background: inherit;
    position: relative;

    &:not(:last-child) {
      margin-bottom: $margin-half;
    }

    @include breakpoint(sm) {
      flex-grow: 1;
      flex-basis: 0;
      margin-bottom: 0;

      &:not(:last-child) {
        margin: 0 $margin-normal 0 0;
      }

      .pictogram {
        height: $margin-triple;
        width: $margin-triple;
      }
    }

    .cutout {
      display: none;

      @include breakpoint(sm) {
        display: flex;
      }
    }

    .wrapper {
      align-items: center;
      background: $color-beige-200;
      border-radius: $border-radius-normal;
      padding: $margin-normal;

      @include breakpoint(sm) {
        flex-direction: column;
        height: 100%;
        padding: $margin-triple $margin-normal $margin-double;
        text-align: center;
      }

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

      /* stylelint-disable max-nesting-depth */
      .text-value {
        @include breakpoint(sm) {
          flex-direction: column;
          margin-left: 0;
        }
      }

      .value {
        @include breakpoint(sm) {
          text-align: center;
          margin-left: 0;
        }
      }

      .pictogram {
        @include breakpoint(sm) {
          display: none;
        }
      }

      /* stylelint-enable */
    }
  }
}

.climate-container {
  height: 24px;
}