style.css

/* 
h1{
   color: lightseagreen;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
}
.cards{
   display: flex;
   justify-content: center;
}

.margin-bet{
   margin: 20px;
}

img{
   border-radius: 10%;
   width: 100px;
   border: 4px solid black;
}

img:hover{
   border-radius: 10%;
   width: 350px;
   transition: 1s;
} */

*{
   box-sizing: border-box;
}
body{
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   overflow: hidden;
   margin: 0px;
}
.container{
   display: flex;
   width: 90vw;
} 

.panel{
   background-size: auto 100%;
   background-position: center;
   background-repeat: no-repeat;
   height: 80vh;
   border-radius: 50px;
   color: white;
   cursor: pointer;
   flex: 0.1;
   margin: 10px;
   position: relative;
   transition: flex 1s ease-in;
}

.panel h3{
   font-size: 24px;
   position: absolute;
   bottom: 20px;
   left: 40px;
   margin: 0;
   opacity: 0;
}

.panel.active{
   background-size: cover;
   flex: 0.9;
}

.panel.active h3{
   opacity: 1;
   transition: opactiy 0.3s ease-in 0.4s;
}   

@media (max-width: 480px) {
   .container{
      width: 100vw;
   }

   .panel:nth-of-type(4),
   .panel:nth-of-type(5){
      display: none;
   }
}