.card {
  background: $tertiary-color;

  .gradient-overlay:before {
    background: transparent linear-gradient(180deg, #00000000 0%, #000B1B03 57%, #00337886 81%, #003378 100%) 0% 0% no-repeat padding-box;
  }

  .gradient-overlay-left:before {
    background: transparent linear-gradient(-90deg, #00000000 0%, #003378 100%);
    width: 75%;
  }

  .content {
    @include media-breakpoint-down(md) {
      padding: 12px 20px;
    }

    .icon>div {
      background: $secondary-color;
    }

    .title {
      /* break long description to multiple lines */
      white-space: initial;

      @include media-breakpoint-down(md) {
        margin-left: 10px;
      }

      h3 {
        letter-spacing: 0px;
        padding-bottom: 15px;
        line-height: normal;
        color: $white;

        @include media-breakpoint-down(md) {
          text-align: left !important;
          padding-bottom: 10px;
        }
      }

      .subtitle p {
        @include media-breakpoint-down(md) {
          text-align: left !important;
        }
      }

      .subtitle {
        font-size: $font-size-16;
        line-height: normal !important;

        ul {
          @include media-breakpoint-down(md) {
            padding: 0 0 15px 0px;
          }

          li {
            font-weight: 700;
            color: $tertiary-color;

            @include media-breakpoint-down(md) {
              font-weight: 500;
              padding-left: 15px;
              padding-bottom: 10px;
            }

            &:before {
              top: 8px;
            }
          }
        }

        a {
          color: $tertiary-color;
          text-underline-offset: 1px;
        }
      }
    }

    .price-wrap {
      margin-top: 5px;

      .price-items {
        li {
          .price {
            font-size: 2.5rem;
          }

          .title {
            font-weight: $font-weight-bold;
            max-width: 66%;

            .subtitle {
              /* break long description to multiple lines */
              white-space: initial;
            }
          }

          .price-wrap-inner .price-old {
            color: $tertiary-color;
            font-size: $font-size-20;

            :before {
              background: #ffffff;
            }
          }
        }

        li.price-style1 {
          @include media-breakpoint-down(md) {
            background: #ffffff !important;

            .title {
              p {
                text-align: left;
              }
            }

            .price {
              a {
                font-size: 1.25rem;
                font-weight: 900;
              }
            }
          }
        }
      }

      .items-below {
        @include media-breakpoint-down(md) {
          padding: 0px;
        }

        li {
          background: $tertiary-color;

          @include media-breakpoint-down(md) {
            padding: 10px;
          }

          .title {
            font-weight: $font-weight-normal;
          }

          .price {
            font-size: $font-size-24;
          }
        }
      }
    }
  }

  &.cardtype-price {
    &.no-pic {
      &.border-rounded {
        .content {
          @include media-breakpoint-down(md) {
            padding: 10px;
          }

          &:has(.btn-out) {
            @include media-breakpoint-down(md) {
              padding-bottom: 22px;
            }
          }

          &>.title {
            @include media-breakpoint-down(md) {
              margin-left: 0px;
              margin-bottom: 20px;

              >h3 {
                padding-bottom: 5px;
                padding-top: 0px;
                line-height: 30px;
              }
            }
          }

          .price-wrap {
            @include media-breakpoint-down(md) {
              margin-top: 0px;

              >.price-items {
                margin-bottom: 0px;

                li.price-style2 {
                  margin: 0 0 8px 0;
                  padding: 9px 10px;

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

                  .price-wrap-inner {
                    .price {
                      display: flex;
                      flex-direction: row;
                      justify-content: space-between;

                      >.title {
                        font-size: 20px;
                        font-weight: 900;
                      }
                    }
                  }
                }
              }
            }
          }

        }
      }

      &.img-top {
        .content {
          @include media-breakpoint-down(md) {
            padding: 10px 10px 25px 10px;
          }

          &>.title {
            @include media-breakpoint-down(md) {
              margin-left: 10px !important;
              margin-bottom: 20px;

              ul {
                padding: 0 0 0px 0px;

                li {
                  &:last-child {
                    padding-bottom: 0px;
                  }
                }
              }

              >h3 {
                padding-bottom: 5px;
                padding-top: 0px;
                line-height: 30px;
              }
            }
          }

          .price-wrap {
            @include media-breakpoint-down(md) {
              margin-top: 0px;
            }

            ul.price-items.items-below {
              li.price-style1 {
                margin: 0 0 8px 0;
                padding: 9px 10px;

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

    .btn-out {
      a:hover {
        .icon {
          background-color: #ffffff;
        }
      }
    }

  }

  &.content-on-image-bottom {
    &.border-rounded {
      .content {
        .btn-out {
          a {
            @include media-breakpoint-down(sm) {
              font-size: 1rem !important;
              padding: 10px 20px !important;
            }
          }
        }
      }
    }
  }
}

.content-on-image-bottom {
  .content {
    .title {
      max-width: 90%;

      h3 {
        text-transform: none;

        @include media-breakpoint-down(md) {
          padding-bottom: 0;
        }
      }
    }
  }
}

.mosaic {
  .content-on-image-bottom {
    .figure {
      img {
        @include media-breakpoint-down(md) {
          min-height: 240px;
        }
      }
    }

    .content {
      @include media-breakpoint-down(md) {
        padding: 20px;

        .title a {
          text-align: left;
          width: 100%;
          display: block;
        }
      }

      .title {
        text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);

      }
    }
  }
}

.img-left,
.img-right {
  background: $secondary-bg;

  .content {
    justify-content: center;

    .title {
      h3 {
        font-weight: 900;
        color: $secondary-color;
        text-transform: none;
      }

      .subtitle,
      &>p {
        font-family: "Gotham", sans-serif;
        font-size: 1.25rem;
        line-height: 1.625rem;
        font-weight: 400;
        color: $black;
        text-transform: none;
      }
    }
  }
}

#news .card .content .title:after {
  display: none;
}

.card .content .icon {
  filter: none;
}

.owl-carousel .owl-stage .card,
.card.img-top {
  .content {
    flex: 0 1 0%;

    .title {
      @include media-breakpoint-down(md) {
        margin-left: 0px;
      }
    }
  }
}

@include media-breakpoint-down(md) {
  .card {
    .content {
      .price-wrap {
        .items-aside {
          padding: 0;
        }
      }
    }
  }

  .card .content .price-wrap .price-items li.price-style1 {
    background-color: #ffffff !important;
  }

  .card .btn,
  .split-cont .btn,
  .split-cont a.btn {
    padding: 10px 20px;
  }
}

/* Feedback inquiry from DM @04.05.2022 to display buttons on mobile bigger and to remove space above dots nav on mobile */
@include media-breakpoint-down(md) {
  .card {
    .content {
      .btn-out {
        a {
          font-size: 1.125rem !important;
          padding: 14px 30px !important;
          min-width: 80% !important;
        }
      }
    }
  }
}

@include media-breakpoint-down(md) {
  .container {
    .owl-carousel {
      .owl-dots {
        margin-top: 8px !important;
      }

      .owl-nav button.owl-prev:before,
      .owl-nav button.owl-next:before {
        line-height: 3.5rem !important;
      }

      .card.content-on-image-bottom {
        .content {
          padding: 24px 10px !important;
        }
      }
    }
  }

  .slide-item-review.cardtype-rating {
    padding: 30px 30px;

    .rating {
      margin-bottom: 20px !important;
    }

    h4,
    .card-content {
      margin-bottom: 20px !important;
      height: auto;
    }

    .rating-author p {
      color: #fff;
    }
  }
}

/* Feedback inquiry from DM @04.05.2022 to avoid uppercase for card subheadings and bigger headlines on mobile */
.card .content .title .subtitle {
  text-transform: initial;
}

.mosaic-3col {
  @include media-breakpoint-up(lg) {
    .row>*>div {
      padding-bottom: 50px;
    }
  }
}

.owl-carousel {
  .owl-item {

    .item {
      .card.img-top.border-rounded {
        @include media-breakpoint-down(xxl) {
          padding-bottom: 30px;
        }

        @include media-breakpoint-down(md) {
          padding-bottom: 25px;
        }

      }
    }
  }
}