*{
    margin: 0px;
    padding:0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


body{
    padding: 0px;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    min-height: 100vh;
   
   
}

.container{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    width: 100%;
    
}

.card{
    display:flex;
  
}
nav>img{
    max-width: 50%;
    margin: 60% 20% 3% 9%
    
}
nav>h3{
    color:white;
    font-size:14px;
    line-height: 1.5rem;
}

nav >hr {
    border: 1px solid white;
    
}
nav>p{
    color:white;
    opacity: 0.5;
    text-transform: uppercase;
    font-size: 9px;
    margin:1% 2% 3% 2%
}

main>img{ 
    max-width:90%;
    margin: 1% 5% 2% 10%;
}





.card:nth-child(1){
    background-color:rgb(65,202,110);
    padding:20% 5% 1% 20%;
   
    
   
   } 

.card:nth-child(2){
  
  background-color: rgb(250,177,83);
  padding:20% 15% 1% 30%;
}

.card:nth-child(3){
    background-color:rgb(114,119,213);
    padding:13% 15% 1% 15%;
}

.card:nth-child(4){
    background-color:rgb(248,125,81);
    padding:15% 10% 1% 15%;;
   
}

.card:nth-child(5){
    background-color:rgb(237,84,102); 
    padding:15% 10% 1% 15%;   
}
.card:nth-child(6){
    background-color:rgb(78,194,231);
    padding:15% 10% 0% 9%;
}

 
@media(min-width:320px) and (max-width:768px) {
    .container{
        display: grid;
        grid-template-columns:repeat(1,1fr);
        min-height: 100vh;
    } 
    .card{
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
   main>img{
       align-items: center;
   }



}

@media(min-width:768px){
    .container{
        display: grid;
        grid-template-columns:repeat(2,1fr)
    }
   
} 

@media(min-width:1100px){
    .container{
        display: grid;
        grid-template-columns:repeat(3,1fr);
    }
}