.element__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px
}

.element__card {
    padding: 15px;
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/2.5;
    background-color: #5450503b;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    transition: background-color .3s;
    -webkit-transition: background-color .3s;
    -moz-transition: background-color .3s;
    -o-transition: background-color .3s;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.element__card-title{
    margin-bottom: 10px;
}
.element__card-info {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: space-between;
    height: auto;
    flex: 1;
    min-height: 0;
}

.element__card-box-img {
    position: absolute;
    width: 330px;
    aspect-ratio: 16/9;
    right: -10%;
    top: 55%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.element__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: scale .6s;
    -webkit-transition: scale .6s;
    -moz-transition: scale .6s;
    -ms-transition: scale .6s;
    -o-transition: scale .6s
}
.services__card-btn-more.none{
    display: none;
}
@media (hover:hover) {
    .element__card:hover {
        background-color: #5450504d
    }
}



@media (min-width:500px) and (max-width:700px) {
    .element__card-box-img {
        position: absolute;
        width: 600px;
        aspect-ratio: 16/9;
        right: -15%;
        top: 50%;
        transform: translateY(-50%)
    }
}

@media (min-width:700px) {
    .element__cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px
    }

    .element__card-box-img {
        width: 350px;
        right: -40%;
        top: 50%;
        transform: translateY(-50%)
    }
}

@media (min-width:800px) {
    .element__card-box-img {
        width: 400px;
        right: -20%;
        top: 52%
    }
}

@media (min-width:1024px) {
    .element__card {
        aspect-ratio: 16/10
    }

    .element__card-top {
        max-width: 80%
    }
}

@media (min-width:1200px) {
    .element__card {
        aspect-ratio: 16/8;
        padding: 20px;
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        -o-border-radius: 20px
    }

    .element__card-top {
        max-width: 60%
    }

    .element__card-box-img {
        width: 400px;
        right: -15%;
        top: 52%
    }
}

@media (min-width:1350px) {
    .element__card {
        padding: 25px
    }

    .element__card-box-img {
        width: 550px;
        right: -10%;
        top: 49%
    }
}