@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');


*{
    box-sizing: border-box;
}
body{  
    font-family: "Roboto",sans-serif;
    display: flex;  
    margin:0;  
    align-items: center; 
    justify-content:center; 
    height: 100vh;
} 
.container{
    display:flex;
    width:90vw; 
    justify-content: center;
} 
.panel{
    background-size: auto 100%; 
    background-position: center;
    background-repeat: no-repeat; 
    cursor:pointer; 
    color:whitesmoke;  
    height:60vh;  
    flex:0.5;  
    border-radius: 10px;;

    margin:5px;
    position:relative;
    transition: flex 0.7s ease-in;
} 
.panel>h3{ 
   font-size: 24px; 
   position:absolute; 
   bottom:20px;  
   margin:0px;
   left:30px;  
   opacity:0;
} 
.panel.active{
    flex:3;  
} 

.panel.active>h3{
    opacity: 1; 
    transition:opacity 0.3s ease-in 0.5s;
}
@media(max-width:480px)
{
    .container{
        width:100vh;
    } 
    .panel:nth-of-type(6),.panel:nth-of-type(5){
        display:none;
    }
}