style.css

*, *::before, *::after{
    font-family: "Open Sans", sans-serif;
    box-sizing: border-box;
    margin: 0;
}
:root{
    --color-one: hsl(192, 95%, 50%);
    --color-two: hsl(191, 100%, 98%);
}
.cards-container{
    display: flex;
}

.card-main{
    margin: 10px;
    border-radius: 10px;
    box-shadow: 0 5px 7px 0 black;
    width: 50%;

}
.card-main:hover{
    transform: scale(1.01);
    box-shadow: 0 5px 10px 0 pink;
    transition: ease-out .3s;

}

.card-header img{
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    width: 100%;
    max-height: 200px;
    object-position: center;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.card-body, .card-footer{
    padding: 10px;
    font-size: 1rem;
}
.card-footer{
    margin-top: 0px;
}

.card-footer .blue{
    border: none;
    padding: 20px;
    margin-right: 5px;
    border-radius: 15px;
    background-color: var(--color-one);
    color: var(--color-two);
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--color-two);
}
.card-footer .blue:hover{
    background-color: var(--color-two);
    color: var(--color-one);
    box-shadow: 0 0 0 1px var(--color-one);
    transition: ease-out .3s;
}
.card-footer .white{
    border: none;
    padding: 20px;
    margin-right: 5px;
    border-radius: 15px;
    background-color: var(--color-two);
    color: var(--color-one);
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--color-one);
}
.card-footer .white:hover{
    background-color: var(--color-one);
    color: var(--color-two);
    box-shadow: 0 0 0 1px var(--color-two);
    transition: ease-out .3s;
}
@media (max-width: 700px) {
    .cards-container{
        display: flex;
        flex-direction: column;
    }
    .card-main{
        width: 100%;
        display: flex;
    }
    .card-body{
        display: none;
    }
    .card-header img{
        border-radius: 10px 0 0 10px;
    }
    .card-footer{
        display: flex;
        position: relative;
        flex-direction: row;
        
    }
    .card-footer button{
        position: relative;
        height: 30%;
        font-size: 70%;
        font-weight: bold;
        margin: auto 0;
    }
}
@media (max-width: 650px){
    .card-main{
        display: flex;
        flex-direction: column;
    }
    .card-main img{
        border-radius: 10px 10px 0 0;
    }
    .card-footer{
        display: flex;
        justify-content: center;
    }
}