.card {
    position: relative;
    /* height: 100%;
    width: 100%; */
    width: 320px;
    height: 430px;
    border-radius: 10px;
}


.card img {
    position: absolute;
    border-radius: 10px;
    max-height: 430px;
    right:0;
    left:0;
    bottom: 0;
    top: 0;
    margin: auto;
    height: auto;
}

.card-inner {
    background-color: rgba(244, 164, 164, 0.7);
    position: absolute;
    width: 100%;
    height: 100px;
    right:0;
    left:0;
    bottom: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 20px 30px;
}


.user-card {
    color: white;
    margin: auto;
    text-align: justify;
}

#card-basic {
    font-weight: bold;
    font-size: 18px;
}

#card-area {
    font-size: 14px;
}

.page {
    display: inline-block;
    margin: auto;
}

@media screen and (max-width: 1567px) and (min-width: 1150px) {
    .card {
        height: 350px;
    }

    .card img {
        max-height: 350px;
    }
}

@media screen and (max-width: 1470px) and (min-width: 1150px) {
    .card {
        height: 300px;
    }

    .card img {
        max-height: 300px;
    }
}

@media screen and (max-width: 1300px) and (min-width: 1150px) {
    .card {
        height: 250px;
    }

    .card img {
        max-height: 250px;
    }

    .card-inner {
        padding: 10px 20px;
        height: 80px;
    }
}

/* @media screen and (mxn-width: 1150px) {

    .card img {
        height: 350px;
    }
} */



 @media screen and (max-width: 1150px) and (min-width: 992px) {
    .card {
        height: 350px;
    }

    .card img {
        max-height: 350px;
    }
}


@media screen and (max-width: 992px) and (min-width: 768px) {
   .card {
       height: 250px;
   }

   .card img {
       max-height: 250px;
   }

   .card-inner {
       padding: 10px 10px;
   }
   #card-basic {
       font-size: 16px;
   }

   #card-area {
       font-size: 12px;
   }
}