html {
	box-sizing: border-box;
	background: #f8f8f8;
	}

body {
	margin: 0;
	padding: 0;
}


*,*:before,*:after {
	box-sizing: inherit;
}

.container > * {
	/* border: 1px solid #000; */
	padding: 10px;
	
	 margin: 10px;
}

.container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 10px;
         background: white;
    }
   
    .container > * {
        grid-column: 1 / span 12;
    }
    @media (min-width: 600px) {
        .sub_pic {
            grid-column: 1 / span 6;
            grid-row: 3;
        }
        
         .sub_content {
            grid-column: 7 / span 6;
             grid-row: 3;
        }   
       
        .footer {
            grid-column: 1 / span 12;
            grid-row: 4;
        }
        
    }
    @media (min-width: 768px) {
        .sub_pic {
            grid-column: 1 / span 6;
        }
        .sub_content {
            grid-column: 7 / span 6;
            background: white;
            
        }       
       
       
        .footer {
            grid-column: 1 / span 12;
        }
    }
    .container {
        max-width: 100%;
    }
    
    
    
    
     .card_container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 10px;
        padding: 15px;
        text-align: center;
         align-items: center;
        
    }
    
    
     .card_container > * {
        grid-column: 1 / span 12;
    }
    
      @media (min-width: 768px) {
   
    
     .card1{
         grid-column: 1 / span 3;
         
        } 
        
        .card2{
         grid-column: 5 / span 3;
        
        } 
        
        .card3{
         grid-column: 9 / span 3;
          
        }   
        
      }
      
      
     
   /*    opposite details  */
      
      

*,*:before,*:after {
	box-sizing: inherit;
}

.container2 > * {
	/* border: 1px solid #000; */
	padding: 10px;
	
	 margin: 10px;
}

.container2 {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 10px;
         background: white;
    }
   
    .container2 > * {
        grid-column: 1 / span 12;
    }
    @media (min-width: 600px) {
        .sub_pic2 {
            grid-column: 1 / span 6;
            grid-row: 3;
        }
        
         .sub_content2 {
            grid-column: 7 / span 6;
             grid-row: 3;
        }   
       
      
        
    }
    @media (min-width: 768px) {
        .sub_content2 {
            grid-column: 1 / span 6;
           
        }
        .sub_pic2 {
            grid-column: 7 / span 6;
            background: white;
            
        }       
       
       
    }
    .container2 {
        max-width: 100%;
    }