.grid-container {
    display: grid;
    grid-auto-flow: column;
    width: 100vw;
    height: 100wh;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: 10% 10% 10% 15% 15% 20% 5%;
    row-gap: 3%;
  }

  .Header{
    grid-column: 1/4;
    grid-row: 1/1;
    display: grid;
    grid-template-columns: 0.5fr 1fr 2fr;
    grid-template-rows: repeat(4 1fr);
  }

  .item1 {
    grid-column: 2/3;
    grid-row: 2/2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }

  .item2 {
    grid-column: 2/3;
    grid-row: 3/3;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }

  .item3 {
    grid-column: 2/3;
    grid-row: 4/4;
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
    grid-template-rows: 10%  25% 25% 25%;
  }
  .item4 {
    grid-column: 1/4;
    grid-row: 5/5;
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr 1.5fr 1fr 1.5fr 1fr;
    grid-template-rows: repeat(6, 1fr) ;
  }

  .item5 {
    grid-column: 2/3;
    grid-row: 6/6;
    display: grid;
    grid-template-columns:  0.3fr 0.3fr 2fr 0.3fr 0.3fr;
    grid-template-rows: 0.2fr 0.2fr 1fr 1fr;
   
    

  }

  .footer {
    grid-column: 1/4;
    grid-row: 7/7;
    display: grid;
    grid-template-columns: 1fr 2fr 0.3fr 0.5fr;
    grid-template-rows: 1fr 1fr 1fr;
    background-color: darkgray;
  }