.concepts-period-container {
  .concept-period {
    @extend %flexbox-row;
    align-items: baseline;

    &:last-child {
      margin-bottom: $margin-normal;
    }
  }

  span {
    margin: 0 $margin-normal;
  }
}

.concept-info-top {
  margin-bottom: $margin-triple;
}

@include breakpoint(sm) {
  .concept-info-top {
    flex-direction: row;
  }

  .concepts-period-container {
    order: 2;
    width: 40%;
  }

  .concept-period {
    justify-content: flex-end;
  }

  .tui-hotel-concept {
    .tui-text-content {
      order: 1;
      width: 60%;
    }
  }
}

@include breakpoint(lg) {
  .tui-hotel-concept {
    display: flex;

    .tui-text-content {
      order: 2;
      width: 100%;
    }
  }

  .concept-info-top {
    flex-direction: column;
    width: 35%;
    padding-right: $margin-double;
  }

  .concepts-period-container {
    order: 1;
    width: 100%;
  }

  .concept-period {
    justify-content: flex-start;
  }

  .concept-info-bottom {
    width: 65%;
  }
}

.tui-accordion {
  .splash-facts-container {
    padding-bottom: $margin-double;
  }
}

.splash-facts-container {
  @include breakpoint(md) {
    flex-direction: row;
  }

  .splash-img {
    flex-shrink: 0;
    align-self: center;
    background: $color-blue-100;
    border-radius: $border-radius-normal;

    @include breakpoint(md) {
      align-self: flex-start;
      padding-right: $margin-double;
      margin-bottom: $margin-double;
    }
  }

  .splash-facts {
    flex-wrap: wrap;
    margin: -3px -#{$margin-normal};
    padding: 0;

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

    li {
      background: $color-blue-200;
      padding: $margin-normal;
      border-radius: $border-radius-normal;
      margin: 3px $margin-normal;

      @include breakpoint(md) {
        width: calc(50% - #{$margin-double});
      }
    }

    .value {
      margin-left: auto;
    }
  }
}