*{
    margin: 0; padding: 0;
    box-sizing: border-box; font-family: 'Maven Pro', sans-serif;
   }
   
   h1{
    text-align: center; font-size: 1.8rem;
    color: #444; padding: 30px 0; 
   }
   
   main{
    width: 90%; height: 550px;
    margin: auto; border: 1px solid black;
    display: flex; justify-content: space-around;
    align-items: center; flex-wrap: wrap;
   }
   
   div{
    width: 30%; height: 160px;
    /*border: 1px solid red;*/
    box-shadow: 2px 2px 5px grey;
    border-radius: 10px; cursor: pointer;
   
   }
   
   .a{
     background-image: url('img/g1.jpg');
     background-repeat: no-repeat;
     background-size: 100% 100%;
   }
   
   .b{
   background-image: url('img/l2.jpg');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   }
   
   .c{
   background-image: url('img/l4.jpg');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   }
   
   .d{
   background-image: url('img/p2.jpg');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   }
   
   .e{
   background-image: url('img/d1.jpg');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   }
   .f{
   background-image: url('img/p1.jpg');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   }
   .g{
   background-image: url('img/g2.webp');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   }
   
   .h{
   background-image: url('img/d2.jpg');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   }
   
   .i{
   background-image: url('img/l9.jpg');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   }