.card {

  .gradient-overlay:before {
    background: transparent linear-gradient(180deg, #0383B500 0%, #0383B503 57%, #0383B5 100%) 0% 0% no-repeat padding-box;
  }

  .gradient-overlay-left:before {
    background: transparent linear-gradient(-90deg, #0383B500 0%, #0383B503 57%, #0383B5 100%) 0% 0% no-repeat padding-box;
  }

  .content{

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

    .title {
      .subtitle{
        text-transform: none;
      }
    }

    .price-wrap{
      .price-right li .title .subtitle{
        @include media-breakpoint-down(md){
          font-size: $font-size-14;
        }
      }

      .price-items li .from{
        @include media-breakpoint-down(md){
          font-size: $font-size-14;
        }
      }

      .price-left{
        .price-wrap-inner{
          padding-bottom: 0;
        }
      }
    }

    .btn-inn{
      padding-top: 25px;
    }
  }
}

.card.transparent{
  .content{
    *:not(.btn, span){
      color: #000000;
      text-align: center;
      font-weight: 900;
      line-height: normal;
    }

    .title{
      h3{
        padding-bottom: 25px;
      }
    }
  }

  .figure{
    transform: matrix(1, 0.03, -0.03, 1, 0, 0);
    border: 8px solid white;
    box-shadow: 0px 5px 15px #0000001A;
  }
}

.row .col-sm-12:nth-of-type(even), .owl-item:nth-of-type(even){
  .card.transparent .figure{
    transform: matrix(1, -0.03, 0.03, 1, 0, 0);
  }
}

.news .card.transparent{
  .figure{
    transform: none;
  }

  .btn{
    background: none;
    color: $tertiary-color;
    border: 3px solid #BB1F11;
    padding: 6px 15px;
    min-width: 180px;

    &:hover, &:active, &:focus, &:active:focus{
      background: $tertiary-color;
      border: 3px solid #BB1F11;
      color: $primary-color;
    }
  }
}

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

.content-on-image-bottom, .content-on-image{
  @include media-breakpoint-down(xl){
    .figure{
      img{
        aspect-ratio: 1/1;
      }
    }
  }
  .content{
    .title{

      h3{
        font-family: $font-family-primary;
        text-shadow: 0 0 5px #00000099;
      }
      .subtitle{
        text-transform: none;
        text-shadow: 0 0 5px black;
      }
    }

    @include media-breakpoint-down(xl) {
      .btn {
        min-width: 150px;
        padding: 10px 20px;
      }
    }
  }
}

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

  &:hover .title:after{
    animation: arrow2 0.5s linear 1;
    -webkit-animation-name: arrow2 0.5s linear 1;
  }
}

.content-on-image{
  .content .title{
    max-width: 75%;
  }
}

#anreise-cards{
  .card{
    .figure{
      img{
        aspect-ratio: 1.25;
      }
    }
  }

  @include media-breakpoint-between(md, lg){
    .card{
      height: 200px;
      .content{
        padding: 5px;

        .title{
          max-width: 100%;
        }
      }
    }
  }
}