.card {
  color: $tertiary-color;

  &:hover {
    color: $tertiary-color;
  }

  .content {
    font-family: $font-family-raleway;

    >.title {

      >h3,
      >p {
        color: $white;
        text-shadow: none;
        text-transform: none;
        font-weight: 700;
      }

      .subtitle {
        font-size: 14px;

        a {
          color: $quaternary-color;
        }
      }

      ul li {
        &:before {
          top: 5px;
        }
      }
    }

    .btn-inn,
    .btn-out {
      text-align: center;

      @include media-breakpoint-down(md) {
        font-size: $font-size-14;
        padding: 10px 20px;
      }
    }

    .btn-out {
      .btn {
        &:hover {
          background: #fcc75eab;
          color: $black;
        }
      }
    }
  }

  .gradient-overlay {
    &:before {
      background: transparent linear-gradient(180deg,
          #00000000 0%,
          #000b1b03 57%,
          #00273380 81%,
          #093d4e 100%,
          #0d3766 100%) 0% 0%;
    }
  }

  &.img-left {
    background: $secondary-color;
    color: $white;

    .content {
      .title {
        h3 {
          color: $white;
          text-transform: none;
          margin-bottom: 20px;

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

        .subtitle {
          font-size: 16px;
          text-transform: none;
        }
      }

      .price-wrap {
        .items-below {
          li {
            background-color: $pentanery-color;

            .price {
              font-weight: 800;
              font-size: 1.5em;
            }
          }
        }
      }

      .btn-inn,
      .btn-out {
        .btn {
          width: 100%;
        }
      }
    }
  }

  &.img-top {
    color: $black;
    background: $white;

    .figure {
      flex: 1 1 20%;
    }

    .content {
      .title {
        height: 100%;

        h3 {
          text-transform: none;
          margin-bottom: 20px;
          color: $black;

          @include media-breakpoint-down(lg) {
            margin-bottom: 0px;
          }
        }

        .subtitle {
          font-size: 16px;
          text-transform: none;

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

      .price-wrap {
        ul {
          padding-bottom: 0;

          li {
            .title {
              font-weight: 700;
            }
          }
        }
      }
    }
  }

  &.no-pic {
    background: $secondary-color;
    color: $white;

    .content {
      .title {
        p {
          text-shadow: none;
        }

        h3 {
          margin-bottom: 30px;
        }

        .subtitle {
          font-size: 14px;
        }
      }

      .price-wrap {
        ul {
          padding-bottom: 0;

          li {
            padding-top: 30px;
            padding-bottom: 30px;
            flex-grow: 1;

            .price-wrap-inner {
              flex-direction: initial;

              .title {
                font-weight: 700;

                .subtitle {
                  font-weight: 500;
                }
              }

              .price {
                font-size: 38px;
              }
            }
          }
        }
      }
    }

    &.discounted-price {
      .content {
        .price-wrap {
          ul {
            li {
              .price-wrap-inner {
                flex-direction: column;

                .price-old {
                  order: 1;
                  font-size: 20px;
                  margin-bottom: 30px;
                  color: black;

                  &:before {
                    background: white;
                    left: 5px;
                    width: 30px;
                    transform: rotate(-30deg);
                  }

                  &:after {
                    content: "";
                    position: absolute;
                    left: 5px;
                    top: 11px;
                    width: 30px;
                    height: 2px;
                    transform: rotate(30deg);
                    background: white;
                  }
                }

                .price {
                  order: 2;
                  color: red;
                  text-align: left;
                  padding-bottom: 5px;
                }

                .termtxt {
                  order: 3;
                  color: red;
                  font-size: 8px;
                }
              }
            }
          }
        }
      }
    }
  }

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

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

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

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

          .price-wrap {
            @include media-breakpoint-down(lg) {
              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-between(sm, lg) {

          .btn-out {
            a {
              padding: 10px 15px;

              span {
                font-size: 0.8rem;
              }
            }
          }
        }

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

          &:has(.btn-out) {
            padding-bottom: 22px;
          }
        }

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

            ul {
              padding: 0 0 0px 0px;

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

            >h3 {
              padding-bottom: 5px;
              margin-bottom: 10px;
              padding-top: 0px;
              line-height: 30px;
              text-align: left !important;
            }

            span.subtitle {
              p {
                text-align: left !important;
              }
            }
          }
        }

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

          ul.price-items.items-below {
            @include media-breakpoint-down(lg) {
              padding-top: 0px;
              padding-bottom: 0px;
              margin-bottom: 0px;
            }

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

              .title {
                p {
                  @include media-breakpoint-down(lg) {
                    text-align: left;
                  }
                }
              }
            }
          }
        }
      }
    }

    &.img-left {
      .content {
        .title {
          h3 {
            @include media-breakpoint-down(xl) {
              text-align: left !important;
            }
          }

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

            ul {
              padding: 10px 0 0 0px;

              li:before {
                background: #ffffff;
              }
            }
          }
        }

        .price-wrap {
          ul.price-items.items-below {
            @include media-breakpoint-down(xl) {
              padding-top: 20px;
              padding-bottom: 0px;

              li.price-style1 {
                .title {
                  p {
                    text-align: left;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  &.content-on-image-bottom {
    .title {
      span.subtitle {
        @include media-breakpoint-down(md) {
          text-align: left !important;
        }
      }
      &:after {
        @include media-breakpoint-down(lg) {
          right: 0;
        }
      }
    }

    //max-height: 300px;
    .gradient-overlay {
      &:before {
        background: transparent linear-gradient(180deg, transparent 0%, #000000 100%) 0% 0%;
      }
    }

  }
}

.mosaic {
  .content-on-image-bottom {
    max-height: none;
  }
}

.news {
  .card {
    @include media-breakpoint-down(sm) {
      height: 300px;
    }

    .figure {
      &:before {
        background: linear-gradient(180deg, #00000000 0%, #0d3766 100%) 0% 0%;
      }
    }

    .content {
      .title * {
        color: $white;
      }

      .title {
        .subtitle {
          @include media-breakpoint-down(sm) {
            text-align: right;
            font-size: 16px;
          }
        }
      }
    }
  }
}

.owl-carousel .owl-item .item .card {

  &.content-on-image-bottom,
  &.content-on-image {

    .content,
    .figure {
      flex: 1 1 50%;
    }
  }

  &.img-left {

    .content,
    .figure {
      flex: 0 1 50%;
    }
  }

  &.img-top {
    .figure {
      flex: 1 1 50%;
    }

    .content {
      flex: 3 1 0%;
    }
  }
}

//.news{
//    .card{
//        margin: 4px;
//        background: $white;
//
//        .figure{
//            flex: 0 1 50%;
//
//            &:before{
//                display: none;
//            }
//        }
//
//        .content{
//            background: $white;
//            .title{
//                h3, a{
//                    font-size: $font-size-16;
//                    line-height: normal;
//                    color: $black;
//                }
//                p *, .subtitle{
//                    text-transform: none;
//                    font-weight: 500;
//                    line-height: $line-height-18;
//                    padding: 20px 0;
//                    color: $black;
//                }
//            }
//
//            .btn-out{
//                /* change button out to button in by css */
//                text-align: left;
//                width: 100%;
//                display: inline-block;
//                vertical-align: top;
//                position: initial;
//                transform: none;
//            }
//        }
//    }
//
//    .owl-dots{
//        margin-top: 0;
//    }
//
//    .owl-nav{
//        display: none;
//    }
//}

@include media-breakpoint-down(lg) {
  .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;
    }
  }
}

@include media-breakpoint-down(md) {
  .owl-carousel .item {
    &:has(.slide-item-review.cardtype-rating) {
      width: 100%;

      .slide-item-review.cardtype-rating {
        width: 100%;
      }
    }
  }

  .slide-item-review.cardtype-rating {
    * {
      text-align: left !important;
    }
  }

  .frame-type-news_newsliststicky .news .item .card.img-top .content .title h3,
  .frame-type-news_newsliststicky .news .item .card.img-top .content .title span.subtitle {
    text-align: left !important;
    padding-top: 0px !important;
  }

  .content-on-image-bottom .content .title:after {
    right: 0px;
  }
}

@include media-breakpoint-between(sm, md) {
  .item {
    &:has(.card.content-on-image-bottom) {
      height: 100% !important;
    }

    .card.content-on-image-bottom {

      .figure.gradient-overlay-left,
      .figure.gradient-overlay-right,
      .figure.gradient-overlay {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }

      .content {
        position: static;

        .title {
          h3 {
            padding-top: 0px;
            padding-bottom: 15px;

            a:hover {
              color: #ffffff;
            }
          }

          span.subtitle {
            text-align: center;
          }
        }
      }
    }

    &:has(.slide-item-review.cardtype-rating) {
      width: 100%;

      .slide-item-review.cardtype-rating {
        width: 100%;
      }
    }
  }
}