.tui-card {
  @extend %card-default-grid;
  @extend %flexbox-column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  color: inherit;
  background: $color-white;
  margin: 0 #{$margin-card-xs / 2} $margin-card-xs;
  box-shadow: $box-shadow-card;
  border-radius: $border-radius-tui-card;
  transition: all .2s;

  .media-container {
    border-radius: $border-radius-tui-card $border-radius-tui-card 0 0;
    overflow: hidden;
    border: 0;
  }

  .media,
  .media-container .ratio-16-9 {
    border-radius: inherit;
    transition: transform .2s;
  }

  &:link,
  &:visited,
  &.tui-concept-card,
  &[data-link-modal-id] {
    &:hover {
      box-shadow: $box-shadow-card-hover;
      text-decoration: none;
      color: inherit;
      outline: 0;

      .media,
      .media-container .ratio-16-9 {
        transform: scale(1.02);
      }
    }
  }

  h3 {
    :empty {
      display: none;
    }
  }

  .card-text {
    padding: $margin-normal;
    background: $color-white;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 $border-radius-tui-card $border-radius-tui-card;
    overflow: hidden;

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

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

  .icon-svg-superlativ {
    padding: $margin-half 0;

    /* stylelint-disable max-nesting-depth */
    @at-root {
      .cruise & {
        margin-top: auto;
      }
    }
    /* stylelint-enable */
  }

  .info-block {
    flex-grow: 1;
  }

  .body-text {
    :last-child {
      margin-bottom: 0;
    }
  }

  .tui-concept-logo,
  .concept-logo,
  .label-icon {
    position: absolute;
    z-index: 10000;
  }

  .offer-block {
    @include font-size(13);
    color: $color-grey;
    margin-top: $margin-half;
  }

  .price-text {
    @include font-size(24);
    color: $color-red-400;
    font-weight: bold;
    white-space: nowrap;
  }

  &:hover {
    box-shadow: $box-shadow-card-hover;
    text-decoration: none;
    color: inherit;
    outline: 0;
  }

  &.horizontal {
    flex-basis: 100%;
    width: auto;

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

    .media-container {
      @include breakpoint(md) {
        flex-basis: 270px;
        min-width: 270px;
      }
    }
  }

  .main-area {
    padding: $margin-normal;
    border-radius: 0 0 $border-radius-tui-card $border-radius-tui-card;
    margin-bottom: auto;

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

    h3 {
      word-break: break-word;
      hyphens: auto;
    }
  }
}

.tui-card-list {
  @extend %flexbox-row;
  flex-wrap: wrap;
  background: inherit;
  margin: 0 -#{$margin-card-xs / 2} -#{$margin-card-xs};

  @include breakpoint(sm) {
    margin: 0 -#{$margin-card / 2} -#{$margin-card};
  }
}

@include breakpoint (sm) {
  .tui-card {
    margin: 0 #{$margin-card / 2} $margin-card;
  }
}