RESPONSIVE CARD CSS

 

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{

    display: flex;

    flex-wrap:wrap;

    flex-direction: row;

    justify-content: center;

    margin-top: 100px;

    margin: 0px;

    padding: 0px;

    box-sizing: border-box;

    font-family: poppins;

}

body{

    margin-top: 100px;

}

.card{

    width: 325px;

    height: auto;

    background-color: rgb(255, 255, 255);

    border: 8px;

    border-radius: 8px;

    box-shadow: 0px 2px 4px rgb(142, 175, 164);

    overflow: hidden;

    margin: 20px;

}

.card img{

    width: 100%;

    height: auto;

}

.card h3{

    font-size: 22px;

    margin-bottom: 8px;

    font-family: poppins;

}

.card p{

    font-size: 15px;

    line-height: 1.3;

}

.card .btn{

    display: inline-block;

    padding: 8px 16px;

    text-decoration: none;

    border-radius: 4px;

}