* {
    box-sizing: border-box;
  }
  
  .grid-container {
    margin: 2px auto;
    width: 100%;
    height: 67vh;
    display: grid;
    grid-auto-columns: 1fr;
    gap: 1em;
    grid-template-areas: 
    'one one two two  six'
    'one one three five  six'
    'four four four five  six'
    /* grid-template-areas: 
      'one one two two  six'
      'one one three five  six'
      'four four four five  six' */
  }
  
  .grid-item {
    border-radius: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cardItem{
    color: #000000;
  }

  .icon-box i {
    color: #296e49;
    margin-top: 0px;
  }

  
  .grid-item:nth-child(1) {
    grid-area: one;
    background-color: #f8f5f5;
    /* color: #296e49; */
  }
  
  .grid-item:nth-child(2) {
    grid-area: two;
    background-color: #f8f5f5;
  }
  
  .grid-item:nth-child(3) {
    grid-area: three;
    background-color: #f8f5f5;
  }
  
  .grid-item:nth-child(4) {
    grid-area: four;
    background-color: #f8f5f5;
  }
  
  .grid-item:nth-child(5) {
    grid-area: five;
    background-color: #f8f5f5;
  }

  .grid-item:nth-child(6) {
    grid-area: six;
    background-color: #f8f5f5;
    /* color: #296e49; */
  }
  
/* 
  @media (max-width: 940px) {
    .grid-container {
      grid-template-areas: 
      'one one two five five'
      'three three three five five'
      'four four four four four'
    }
  }
  
  @media (max-width: 640px) {
    .grid-container {
      grid-template-areas: 
      'one one two two two'
      'three three three five five'
      'four four four four four'
    }
  }

   @media (max-width: 460px) {
    .grid-container {
      grid-template-areas: 
      'one'
      'two'
      'three'
      'four'
      'five'
      'six';
    }
  } */

  @media (max-width: 640px) {
    .grid-container {
      grid-template-areas: 
      'one two three'
      'four five six';
    }
  }
    
 @media (max-width: 460px) {
    .grid-container {
      grid-template-areas: 
      'one two'
      'three four'
      'five six';
    }
  } 
