style.css

.container{
    display:flex;
    gap:10px
}
.card{
    width: 300px;
    height: 350px;
    background-color:rgba(128, 128, 128, 0.817);
    border-radius: 10px;
    transition: 300ms ease-in-out;
    box-shadow: 0 5px 10px 0 #8f1212;
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: all 0.6s ease;

}
.card + .card{
    margin-left:-10px;
    }
    .card:hover{
        transform: rotate(180deg);
    }
    .card:hover{
        z-index: 1;
    }
    .card{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    
    h1{
        display: flex;
        justify-content: center;
        text-decoration: underline;
        background-color: rgba(0, 0, 0, 0.979);
        color: aliceblue;
        transition: 2s ease-in 1s ease-out ;
    }
h1:hover{
    background-color: rgba(255, 217, 0, 0.694);
    width: 1200px;
    display: flex;
    justify-content: center;
}
.container{
    background-image: url(.//img.avif);
    object-fit: cover;
    width: 100vw;
    height: 101vh;
}
.myImage{
   height: 350px;
   width: 300px;
    }
@media (min-width: 1200px) {
    .container {
         padding: 50px;
    }
}
@media (min-width: 992px) and (max-width:1199px) {
    .container {
         padding: 40px;
    }
}
@media (min-width: 768px) and (max-width:991px){
    .container {
         padding: 30px;
    }
}
@media (max-width: 767px) {
    .container {
         padding: 23px;
    }
}