.content-on-image {
  @include media-breakpoint-down(xl) {
    .content {
      width: 100%;
    }
  }
}

.cta-cont .newsletter {
  @include media-breakpoint-down(md) {
    padding: 25px 25px;
    .heading-txt {
      margin-bottom: 20px;
    }
  }
}

.card > .content > .icon > div {
  height: 40px;
  width: 40px;
  background: $red;
}

.card {
  background: $secondary-color;

  .gradient-overlay:before {
    background: transparent linear-gradient(180deg, #00000000 0%, #00000000 50%, $secondary-color 100%) 0% 0%;
  }

  .content{
    .price-wrap .items-aside li {
      padding: 15px 10px;

      .price-wrap-inner .price {
        color: $tertiary-color;
        font-size: 2.188rem;
        white-space: nowrap;
        text-align: left;
      }
    }

    .title{
      h3{
        color: $primary-color;
        letter-spacing: 0;
      }

      .subtitle{
        text-transform: none;
        line-height: $line-height-22;
        font-size: $font-size-14;
      }

      ul{
        padding-left: 0;

        li:before{
          top: 6px;
          left: 2px;
        }
      }
    }
  }
}

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

.news{
  .card{
    border: 2px solid $secondary-color;
    margin: 4px;
    background: $white;

    .figure{
      &:before{
        display: none;
      }
    }

    .content{
      .title{
        h3, a{
          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;

        .btn{
          color: #ffffff;
          background: #722929;
        }
      }
    }
  }
}

.mosaic{
  .card{
    .figure.gradient-overlay:before{
      background: transparent linear-gradient(180deg, #00000000 0%, #000000 100%);
      opacity: 0.5;
    }

    .content{
      .title{
        max-width: 90%;

        // h3{
        //   @include media-breakpoint-down(xl){
        //     font-size: $font-size-20;
        //   }
        // }

        .subtitle{
          @include media-breakpoint-down(xl){
            font-size: $font-size-14;
          }
        }
      }

      .btn{
        background: $quaternary-color;
        color: $white;
        @include media-breakpoint-down(xl){
          min-width: unset;
          padding: 14px 10px;
        }

        &:hover, &:active, &:focus, &:active:focus{
          background: $secondary-color;
        }
      }
    }
  }
}

@include media-breakpoint-between(md,xxl){
  .card .content .price-wrap .items-aside{
    flex-direction: column;

    li{
      .title, .price-wrap-inner .price{
        text-align: center;
        padding-bottom: 0;
      }
    }
  }
}

.card .content .price-wrap .items-below li .subtitle{
  display: block;
}

.card .content .price-wrap .price-right{
  margin-top: 50px!important;
  margin-bottom: 50px!important;

  li{
    .title{
      font-weight: $font-weight-bold;
    }

    .price{
      color: $tertiary-color;
    }
  }
}