.location-card {
  @extend %flexbox-column;

  .hotels {
    @include font-size(14);
    white-space: nowrap;
    margin-right: $margin-normal;

    &:before {
      content: '\00a0';
    }
  }

  .hotel-amount {
    @include font-size(14);
    flex-grow: 1;

    &:empty {
      display: none;

      + .hotel-amount-text {
        display: none;
      }
    }
  }

  .offer-text {
    @include font-size(14);
    flex-grow: 1;
    text-align: right;

    &:after {
      content: '\00a0';
    }
  }

  .price-text {
    @include font-size(24);
    order: 4;

    &:empty {
      display: none;

      + .offer-text {
        display: none;
      }
    }
  }

  .tui-text-content {
    @include font-size(14);
    border-top: 1px solid $color-tui-grey-25;
    margin: 0 $margin-half $margin-normal;
    padding: $margin-half 0 0;
    flex-grow: 1;

    &:empty {
      border: 0;
      padding: 0;
      margin: 0;
    }

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

  @include breakpoint(xs) {
    width: 100%;
  }
}

.location-card-text {
  @extend %flexbox-row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  padding: $margin-normal;

  @include breakpoint(sm) {
    flex-wrap: nowrap;
    padding: $margin-normal $margin-double;
  }

  h3 {
    @include font-size(18);
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    white-space: nowrap;
    min-width: 0;

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