.product-card-list-container {
  width: 100%;
  overflow: hidden;
  padding: $margin-half;
  margin: -$margin-half;
}

.inspiration-destination {
  .product-card-list-container {
    width: calc(100% + #{$margin-normal});
  }
}

.product-card-list {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  padding-bottom: 20px;

  &.active {
    cursor: grabbing;
  }

  &::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }

  &::-webkit-scrollbar {
    display: none;
    background: transparent;
  }

  .card:last-child {
    margin-bottom: $margin-normal;
  }
}

.product-card {
  flex: 0 0 auto;
  margin-bottom: $margin-normal;
  background-color: $color-white;
  width: calc(#{percentage(1 / 1.5)} - #{$margin-normal});

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

  .media-container {
    position: relative;
  }

  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: $margin-normal;
  }

  .country-flag {
    width: 24px;
    height: 24px;
    border-radius: $margin-quarter;
    box-shadow: 0 1px 0 0 rgba($color-black, .1);
    flex-shrink: 0;
  }

  .tui-breadcrumb {
    @include font-size(14);
    margin: 0 $margin-normal;
    width: auto;
    flex: auto;
  }

  .tui-ratings-container {
    display: flex;

    .tui-product-rating,
    .tui-tripadvisor-rating {
      margin-right: $margin-half;
    }
  }

  .tui-product-rating,
  .tui-tripadvisor-rating {
    display: flex;
    flex-shrink: 0;
    height: 24px;
    width: 64px;
    border-radius: $border-radius-normal;
    overflow: hidden;
    align-self: flex-end;

    .icon,
    .score {
      height: 100%;
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .icon {
      background-color: $color-blue-100;
    }

    .score {
      @include font-size(16);
      background-color: $color-blue-400;
      color: $color-white;
      font-weight: bold;
    }
  }

  .tui-tripadvisor-rating {
    background: $color-tripadvisor-green-light;

    .icon {
      background-color: $color-tripadvisor-green-light;
      height: $margin-double;
      width: $margin-double;
      align-self: center;
      margin: 0 $margin-third;
      flex-shrink: 0;
    }

    .score {
      background-color: $color-tripadvisor-green;
    }
  }

  .text-block {
    display: flex;
  }

  .product-name {
    @include font-size(18);
    margin-bottom: $margin-quarter;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    height: 20px;
  }

  .usp {
    @include font-size(16);
    margin-bottom: $margin-normal;
  }

  .price-block {
    margin-top: auto;
  }

  .icon-svg-superlativ {
    margin-right: $margin-half;

    .icon-superlativ {
      width: 24px;
      height: 24px;
    }
  }

  .price {
    font-weight: bold;
  }

  .stay {
    font-style: italic;
    @include font-size(12);
  }

  &.small {
    width: calc(50% - #{$margin-half});
    margin: 0 $margin-normal $margin-normal 0;

    &:nth-child(2n) {
      margin-right: 0;
    }

    @include breakpoint(sm) {
      width: calc(#{percentage(1 / 3)} - (2 / 3 ) * #{$margin-normal});

      &:nth-child(2n) {
        margin-right: $margin-normal;
      }

      &:nth-child(3n) {
        margin-right: 0;
      }
    }

    @include breakpoint(lg) {
      width: calc(#{percentage(1 / 6)} - (5 / 6) * #{$margin-normal});

      &:nth-child(2n):not(:last-child),
      &:nth-child(3n):not(:last-child) {
        margin-right: $margin-normal;
      }
    }

    .card-header,
    .usp {
      display: none;
    }
  }
}