.search-result-cards-container,
.content-cards-list {
  display: flex;

  .search-result-card {
    flex: 1;
    margin-right: $margin-normal;

    &:last-child {
      margin-right: 0;
      margin-bottom: $margin-half;

      @include breakpoint(sm) {
        margin-bottom: 0;
      }
    }
  }
}

.search-result-card {
  position: relative;
  background-color: $color-white;

  &.card {
    width: 100%;
    align-items: flex-start;
  }

  &__large {
    display: none;
    height: 100%;
    width: 100%;
    padding: $margin-enterprise;

    &-bg-image {
      position: absolute;
      top: 0;
      right: 0;
      background-size: cover;
      background-position: right;
      height: 100%;
      width: 66%;
    }
  }

  .image-container {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 50%;

    .ratio-fixed {
      display: block;
      overflow: hidden;
      position: relative;
      width: 100%;
      height: 100%;
    }

    @include breakpoint(sm) {
      width: 60%;
      height: 100%;
    }
  }

  .image-fade {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: linear-gradient(to bottom, rgba($color-white, 0) 0%, rgba($color-white, 1) 50%);

    @include breakpoint(sm) {
      background-image: linear-gradient(to left, rgba($color-white, 0) 0%, rgba($color-white, 1) 100%);
      width: 60%;
      height: 100%;
    }
  }

  &__small {
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .title-container {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 68px;
      text-align: center;
    }
  }

  .title-container {
    position: relative;
    z-index: 1;

    &__top {
      margin: 0;
      padding: 0;
      font-weight: bold;
      font-style: italic;
    }

    &__title {
      margin: 0;
    }
  }

  &__text {
    display: none;
    @include breakpoint(sm) {
      display: block;
    }
  }

  &__large,
  &__small {
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
  }

  &__body {
    padding: 0 $margin-normal $margin-normal;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-top: 160px;
    z-index: 1;

    @include breakpoint(sm) {
      align-items: flex-start;
      width: 50%;
      padding: $margin-enterprise;
      margin-top: 80px;
    }
  }

  &__information {
    display: flex;
    align-items: center;
    white-space: nowrap;
    height: 32px;

    &.invisible {
      visibility: hidden;
    }

    .from {
      display: none;
    }
    @include breakpoint(sm) {
      margin-top: $margin-normal;

      .from {
        display: block;
      }
    }

    &-hotels,
    &-price {
      @include font-size(14);
      display: flex;
      justify-content: center;
      background: #eee;
      text-align: center;
      padding: $margin-half $margin-normal;
      border-radius: $margin-half;
      margin-right: 0;
      font-weight: bold;
    }

    &-price {
      border-radius: 0 $margin-half $margin-half 0;
    }

    &-hotels {
      border-radius: $margin-half 0 0 $margin-half;
      margin-right: 0;
      padding-right: 0;

      .pictogram {
        display: none;
      }
    }

    @include breakpoint(sm) {
      &__top,
      &__title {
        display: block;
      }

      p {
        display: block;
      }

      flex-direction: row;

      &-hotels {
        display: flex;
        padding-right: $margin-normal;
        margin-right: $margin-half;
        align-items: center;

        .pictogram {/* stylelint-disable max-nesting-depth */
          display: block;
          width: 18px;
          height: 18px;
        }
      }

      &-hotels,
      &-price {
        @include font-size(18);
        border-radius: $margin-half;

        > * {
          font-weight: bold;
        }

        > *:first-child {
          margin-right: $margin-half;
        }

        > *:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .search-result-card {
    @include breakpoint(md) {
      &__large {
        display: block;
        width: 100%;
      }

      &__small {
        display: none;
      }
    }
  }

  &:only-child {
    .search-result-card {
      @include breakpoint(sm) {
        &__large {
          display: block;
          width: 100%;
        }

        &__small {
          display: none;
        }
      }
    }
  }

  &:first-child:nth-last-child(2) .search-result-card,
  &:nth-child(2):nth-last-child(1) .search-result-card {
    &__large,
    &__top,
    &__title {
      display: none;
    }

    &__small {
      display: block;
    }

    &__large,
    &__small {
      .title-container {
        height: 70%;
      }
    }

    &__body {
      width: 100%;
      margin-top: 162px;
      align-items: center;
    }

    &__information {
      margin-top: 0;

      &-hotels,
      &-price {
        margin: 0;
        border-radius: 0;
      }

      &-price {
        border-top-right-radius: $margin-half;
        border-bottom-right-radius: $margin-half;
      }

      &-hotels {
        border-top-left-radius: $margin-half;
        border-bottom-left-radius: $margin-half;
      }
    }

    @include breakpoint(sm) {
      &__information {
        &-hotels {
          margin-right: $margin-half;
        }

        &-hotels,
        &-price {
          border-radius: $margin-half;
        }
      }
    }

    @include breakpoint(lg) {
      &__large {
        display: block;
        width: 100%;
      }

      &__body {
        align-items: flex-start;
        width: 50%;
        margin-top: 80px;
      }

      &__small {
        display: none;
      }
    }
  }

  &.center {
    .image-container {
      height: 50%;
      width: 100%;
    }

    .image-fade {
      width: 100%;
      background-image: linear-gradient(to bottom, rgba($color-white, 0) 0%, rgba($color-white, 1) 50%);
    }

    .title-container {
      text-align: center;
    }

    .search-result-card {
      &__large,
      &__top,
      &__title {
        display: none;
      }

      &__small {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }

      &__large,
      &__small {
        .title-container {
          height: 70%;
        }
      }

      &__body {
        align-items: center;
        width: 100%;
        margin-top: 162px;
      }

      &__text {
        display: none;
      }

      &__information {
        margin-top: 0;
      }

      @include breakpoint(sm) {
        &__large,
        &__small {
          .title-container {
            height: 50%;
          }
        }
      }
    }
  }
}