style.css

body{
    background: radial-gradient(at left, #81e8f2, #f8bbc5);
}
h1,h3{
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    color: #202020;
    font-size: 2.2rem;
}
.cards{
    /*border:2px solid red;*/
    margin: 1.5em;
    height: 50vh;
    width: 5vw;
    border-radius: 38px;
    display: flex;
    align-items: flex-end;
    transition: 0.5s ease-out;
}
.cards:hover{
    cursor: pointer;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.13);
}
.main{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.cards h3{
    color:white;
    font-weight: bold;
    position:relative;
    left: 10px;
    opacity: 0;
    transition: 0.5s ease-out;
}
.cards.active{
    width:20vw;
    transition: 0.5s ease-out;
}
.cards.active h3{
    opacity: 1;
    transition: 0.5s ease-out;
}
#pvt1{
    background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
}
#pvt2{
    background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
}
#pvt3{
    background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80');
}
#pvt4{
    background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
}
@media(max-width:680px){
    .main{
        flex-direction: column;
    }
    .cards{
        width:80vw;
        height: 10vh;
    }
    .cards.active{
    width:80vw;
    height:40vh;
    }
}