.offer-card-large-container > div,
.content-cards-list > .offer-card,
.content-cards-list > .offer-card-large {
  margin-bottom: $margin-half;

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

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

.offer-card,
.offer-card-large {
  width: 100%;
  box-shadow: none;
  background: transparent;
  overflow: visible;

  &:hover {
    box-shadow: none;
    transform: scale($scale-card-hover);

    .text-block,
    .button-block {
      box-shadow: $box-shadow-card-hover;
    }
    z-index: 99;
  }

  .icon-svg-superlativ {
    display: flex;
  }

  .icon-superlativ {
    height: 1.8em;
    width: 1.8em;
  }

  .block-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

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

  .text-block,
  .button-block {
    box-shadow: $box-shadow-card;
    border-radius: $border-radius-tui-card;
    background-color: $color-white;
    transition: all .1s ease-in-out;
  }

  .text {
    margin-bottom: 0;
    white-space: nowrap;
  }

  .text-block {
    display: flex;
    position: relative;
  }

  .icon-list {
    margin: 0;
    padding: 0;

    .icon-list-item {
      display: flex;
      align-items: center;
    }
  }
}

.offer-card {
  max-width: 400px;
  height: 200px;
  box-shadow: none;
  background-color: none;

  &-row {
    display: flex;

    &:last-child {
      height: 100%;
      align-items: flex-end;
    }
  }

  .pictogram-chevron {
    display: none;
  }

  .icon-list {
    .pictogram {
      margin-right: $margin-half;
    }
  }

  .dotted-container {
    position: absolute;
    height: 9px;
    width: calc(100% - #{$margin-enterprise});
    left: 10px;
    top: -4px;
    background: $color-white;
  }

  .dotted {
    margin-top: $margin-quarter;
    height: 2px;
    background-image: linear-gradient(to right, transparent 50%, $color-beige-100 50%);
    background-size: 8px $margin-normal;
  }

  .icon-superlativ {
    margin-right: $margin-normal;
    align-items: center;
  }

  .btn {
    width: 100%;
    text-transform: none;
  }

  @include breakpoint(md) {
    height: 240px;

    .text-block,
    .button-block {
      padding: $margin-enterprise;
    }
  }
}

.offer-card-large {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-right: 0;

  .temp-on {
    display: none;

    @include breakpoint(sm) {
      display: inline-block;
    }
  }

  .text-block {
    flex: 2;
    flex-direction: row;
    margin-right: 0;
    padding: 14px $margin-normal;
    align-items: center;

    .offer-card-row {
      margin-right: $margin-double;
    }

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

  .button-block {
    padding: $margin-normal;
    width: auto;

    .dotted-container {
      display: none;
    }
  }

  .dotted {
    position: absolute;
    height: calc(100% - 16px);
    width: 20px;
    top: 8px;
    right: -10px;
    background: $color-white;
    z-index: 99;

    .dotts {
      width: 4px;
      height: 100%;
      margin: 0 auto;
      background-image: linear-gradient($color-beige-100 50%, rgba($color-white, 0) 0%);
      background-position: right;
      background-size: 4px $margin-normal;
    }
  }

  .icon-superlativ {
    margin-right: $margin-normal;

    @include breakpoint(lg) {
      margin-right: $margin-normal;
    }
  }

  .pictogram-location {
    display: none;
  }

  .pictogram-chevron {
    transform: rotate(90deg);
  }

  .btn {
    padding: $margin-normal;
    margin: 0;
    text-transform: none;

    .btn-text {
      display: none;
    }
  }

  .icon-list {
    flex-wrap: wrap;
    flex-direction: column;
    flex: 1;

    @include breakpoint(sm) {
      display: flex;
    }

    li {
      display: flex;
      align-items: flex-start;
      margin-right: $margin-normal;

      &:not(:first-child) {
        display: none;
      }

      @include breakpoint(lg) {
        /* stylelint-disable max-nesting-depth */
        &:not(:first-child) {
          display: flex;
        }
        /* stylelint-enable */
      }
    }

    h3 {
      margin: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 0;
      min-width: 100%;

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

    .usp {
      display: none;
    }

    .text {
      @include font-size(16);
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 0;
      min-width: 100%;
      margin-top: $margin-quarter;

      @include breakpoint(sm) {
        @include font-size(18);
        align-items: center;
        width: 100%;
        margin-top: 0;
      }
    }

    @include breakpoint(md) {
      flex-direction: row;
      align-items: center;

      .pictogram-location,
      .usp {
        display: flex;
      }
    }
  }

  @include breakpoint(md) {
    .text-block {
      padding: 20px $margin-enterprise;
    }

    .pictogram-chevron {
      display: none;
    }

    .btn {
      width: 182px;

      .btn-text {
        display: block;
      }
    }
  }

  @include breakpoint(lg) {
    .btn {
      width: 252px;
    }
  }
}