.content-cards-list {
  @extend %focus-cards;
  @extend %flexbox-row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 -#{$margin-card-xs / 2} -#{$margin-card-xs};
  position: relative;
  width: 100%;

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

  h2 {
    font-weight: bold;
  }

  &.musement {
    @include breakpoint(lg) {
      flex-wrap: nowrap;

      .content-card {
        width: calc(17% - #{$margin-card});
      }
    }
  }

  &.cruise {
    .tui-product-card {
      width: 100%;
    }

    @include breakpoint(sm) {
      .tui-product-card {
        width: calc(#{percentage(1 / 4.5)} - #{$margin-normal});
      }
    }
  }
}

.content-cards-unbordered .content-card {
  .card-text {
    border: 0;
  }
}

.reverse-order-light-blue {
  .content-card:nth-child(1):nth-last-child(1) {
    @include breakpoint(sm) {
      .media-container {
        order: 2;
        border-radius: 0 $border-radius-normal $border-radius-normal 0;
      }

      .offer-icon {
        right: 0;
      }

      .tui-concept-logo,
      .concept-logo,
      .label-icon {
        left: calc(#{percentage(1 / 3)} + #{$margin-normal});
      }
    }

    .card-text {
      border-radius: $border-radius-normal 0 0 $border-radius-normal;
    }
  }

  .card-text {
    background: $color-blue-100;
    flex-grow: 1;
    overflow: hidden;
  }
}