/* ############# START OF HOMEBLOCK ############# */

/*homeblock is the container for card 1 and card 2. It simply adds 10% padding*/
#homeblock{
    padding: 0;
    align-items: center;
  }
  
  #card1{
      display:grid;
      grid-template-columns: 50%;
  }
  
  /*height starts at row 1,ends in row 4. column starts at column 2 and ends in column 3*/
  #img1{
      width:100%;
      grid-area: 1 / 2 / 4 / 3;
      align-self:center;
      object-fit: cover;
      height: 100%;
      padding: 0px 0px 0px 2px;
  }
  
  /*start at row 1,column1,end in row 4 and span 2 columns*/
  #message1{
      font-size:20px;
      text-align:left;
      grid-area: 1 / 1 / 4 / 2;
      display:flex;
      align-items:center;
  }
  
  #card2{
      display:grid;
      grid-template-columns: 50%;
  }
  
  /*height starts at row 1,ends in row 4. column starts at column 2 and ends in column 3*/
  #img2{
      width:100%;
      grid-area: 1 / 1 / 4 / 2;
      align-self:center;
      object-fit: cover;
      height: 100%;
      padding: 0px 2px 0px 0px;
  }
  
   /*start at row 1,column1,end in row 4 and span 2 columns*/
  #message2{
      font-size:20px;
      text-align: left;
      grid-area: 1 / 2 / 4 / 3;
      display:flex;
      align-items:center;
  }
  
  
  
  @media screen and (max-width: 1200px) {
      #card1, #card2{
          display:grid;
          grid-template-columns: 100%;
      }
      #message1{grid-area: 1 / 1 / 4 / 2; }
      #img1{grid-area: 5 / 1 / 4 / 2; height: auto; padding: 5% 5% 2.5% 5%;}
  
      #img2{grid-area:  6 / 1 / 4 / 2; height: auto; padding: 2.5% 5% 5% 5%}
      #message2{grid-area: 1 / 1 / 4 / 2; }
  
    }
  

  /* ############# END OF HOMEBLOCK ############# */