initial commit

style.css

-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+*{
+    margin:0;
+    padding:0;
     
     }
-  
-  
-  
-  .cont {
-    display: grid;
-   grid-template-columns: repeat(3,1fr);
+    .cont{
+    display:flex;
+    flex-wrap:wrap;
     min-height:100vh;
     
     }
     
     .card{
-    width:100%;
+    width:33.333%;
+    
     
     }
-  .card p{
-    color:white
-}
-  .card .card-text img{
+    .card .card-desc{
+    padding:28px;
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    }
+    .card-text{
+        font-size: 18px;
+    }
+    .card-text img{
         height:50px;
         object-fit: contain;
      aspect-ratio: 3/2;
-}
+    }
     
-.card .card-image img{
+    .card .card-image img{
       max-width:100%;
      height: 300px;
       object-fit:contain;
-}
-.card-text{
-    font-size: 18px;
-}
-  .card-desc{
-    display: grid;
-    align-items: center;
-    justify-content: center;
-    grid-template-columns: repeat(2,1fr);
-    padding: 30px 25px 0;
-   
     }
-  
-  hr{
-    width: 80%;
-    height: 2px;
-    border: none;
-    background-color: white;
+    .card p{
+        color:white
     }
- 
     .cardbg1{
         background:#41ca6e;
-}
-.cardbg2{
+    }
+    .cardbg2{
         background:#fab153
-}
-.cardbg3{
+    }
+    .cardbg3{
         background:#7277d5;
-}
-.cardbg4{
+    }
+    .cardbg4{
         background:#f87d51;
-}
-.cardbg5{
+    }
+    .cardbg5{
         background:#ed5466;
-}
-.cardbg6{
+    }
+    .cardbg6{
         background:#4ec2e7;
-}
+    }
+    
+    hr{
+        height: 2px;
+        background-color: white;
+        border: none;
      
+    }
     
+    .card .card-desc .card-text{
 
+margin:49px;
+    }
     
     /* small screen */
     @media only screen and (max-width:768px){
-    .cont, .card-desc{
-      grid-template-columns: repeat(1,1fr);
-     justify-items: center;
+        .card{
+    flex-basis:100%;
+    
+    }
+    .card .card-desc{
+        display: flex;
+        flex-direction: column;
     }
     
     }  
     /* medium screen */
-    @media only screen and (min-width:769px) and (max-width:1024px){
-        .cont{
+    @media only screen and (min-width:769px)and (max-width:1024px){
+      
+      .card{
+         width:50%;
        
-          grid-template-columns: repeat(2,1fr);
       }
       }
\ No newline at end of file