.card-scale:hover{
    transform: scale(1.05);
    opacity: 0.8;
    content: icon;
    background: transparent;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
    box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

.card-img-overlay {
    transform: translateY(13rem);
    transition: transform 0.18s ease-in;
    background-color: rgba(0, 0, 0, .01);
    /* display: none;     */
}

.card-img-overlay .card-text {
    opacity: 0;
    transform: translateY(-6rem);
    transition: opacity 0.05s ease-in, transform 0.25s ease-in;
}

.card-img-overlay .btn {
    opacity: 0;
    transform: translateY(2rem);
}

.card:hover .card-img-overlay {
    transform: translateY(0);
    transition: transform 0.25s ease-out;
    background-color: rgba(0, 0, 0, .01);
    /* display: block; */
}

.card:hover .btn {
    opacity: 1;
    transform: translateX(2rem);
    transform: translateY(27rem);
    background-color: #dc3545;
    margin-right: 40px;
    transition: opacity 0.7s ease-out, transform 0.35s ease-out;
}

@media (max-width: 280px) {
    .own-text {
        font-size: 0.6rem;
    }
}

@media (max-width: 380px) {
    .card .card-img-overlay {
        transform: translateY(0);
        transition: transform 0.25s ease-out;
        background-color: rgba(0, 0, 0, .01);
    }
    .card-img-overlay .btn {
        opacity: 1;
        transform: translateX(2rem);
        transform: translateY(27rem);
        background-color: #dc3545;
        margin-right: 40px;
        transition: opacity 0.7s ease-out, transform 0.35s ease-out;
        margin-top: -55px !important;
    }
}

@media (max-width: 1010px) {
    h4 {
       font-size: 1rem;
    }
    .card .card-img-overlay {
        transition: transform 0.35s ease-out;
    }

    .viw-btn {
        margin-top: -60px !important;
    }
}

@media (max-width: 755px) {
    .viw-btn {
        margin-top: -10px !important;
    }
}