.grid-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 10px 10px;
  /* width: 100%; */
  max-width: 1440px;
  margin: 0 auto;
  /* 
  grid-template-rows: auto auto;
  grid-template-rows: min-content;
  */
  grid-template-rows: minmax(0, auto) 1fr;
  
  /*
  background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url("/images/header-image.jpg");
  background-size: contain; 
  background-repeat: no-repeat;
  background-position: top; 
  */
}

.grid-item {
  display: flex; 
  flex-direction: column; 
  justify-content: left;
  color: #111111;
  margin-bottom: 100px; 
}

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.item-2 {
  grid-column: 3 / 9;
  grid-row: 1 / 2;
}

.item-3 {
  grid-column: 9 / 11;
  grid-row: 1 / 2;
}

.item-4 {
  grid-column: 1 / 11;
  grid-row: 2 / 3;
}

.item-5 {
  grid-column: 1 / 6;
  grid-row: 3 / 4;
}

.item-6 {
  grid-column: 6 / 11;
  grid-row: 3 / 4;
}

.item-7 {
  grid-column: 1 / 6;
  grid-row: 4 / 5;
}

.item-8 {
  grid-column: 6 / 11;
  grid-row: 4 / 5;
}

.item-9 {
  grid-column: 1 / 6;
  grid-row: 5 / 6;
}

.item-10 {
  grid-column: 6 / 11;
  grid-row: 5 / 6;
}

.item-11 {
  grid-column: 1 / 6;
  grid-row: 6 / 7;
}

.item-12 {
  grid-column: 6 / 11;
  grid-row: 6 / 7;
}

.item-13 {
  grid-column: 1 / 6;
  grid-row: 7 / 8;
}

.item-14 {
  grid-column: 6 / 11;
  grid-row: 7 / 8;
}

/*
.item-15 {
  grid-column: 1 / 6;
  grid-row: 8 / 9;
}

.item-16 {
  grid-column: 6 / 11;
  grid-row: 8 / 9;
}
*/

/*
.item-17 {
  grid-column: 1 / 6;
  grid-row: 9 / 10;
}

.item-18 {
  grid-column: 6 / 11;
  grid-row: 9 / 10;
}
*/

.item-17 {
  grid-column: 1 / 11;
  grid-row: 9 / 10;
}

/*
.item-19 {
  grid-column: 1 / 6;
  grid-row: 10 / 11;
}

.item-20 {
  grid-column: 6 / 11;
  grid-row: 10 / 11;
}
*/

.item-19 {
  grid-column: 1 / 11;
  grid-row: 10 / 11;
}


/* Tablet styles */
@media (max-width: 1024px) {
  .grid-container {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(20, 1fr);
    gap: 10px 10px;
    grid-template-rows: minmax(0, auto) 1fr;
  }

  h1 {
      font-size: 2em !important;
      line-height: 1.2em !important; 
   } 

.grid-item {
  margin-bottom: 30px; 
}

.item-1 {
   grid-column: 1 / 2;
   grid-row: 1 / 2;
}
  
  .item-2 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  
  .item-3 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
  
  .item-4 {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }
  
  .item-5 {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
  }
  
  .item-6 {
    grid-column: 1 / 2;
    grid-row: 6 / 7;
  }
  
  .item-7 {
    grid-column: 1 / 2;
    grid-row: 7 / 8;
  }
  
  .item-8 {
    grid-column: 1 / 2;
    grid-row: 8 / 9;
  }
  
  .item-9 {
    grid-column: 1 / 2;
    grid-row: 9 / 10;
  }
  
  .item-10 {
    grid-column: 1 / 2;
    grid-row: 10 / 11;
  }
  
  .item-11 {
    grid-column: 1 / 2;
    grid-row: 11 / 12;
  }
  
  .item-12 {
    grid-column: 1 / 2;
    grid-row: 12 / 13;
  }

  .item-13 {
    grid-column: 1 / 2;
    grid-row: 13 / 14;
  }

  .item-14 {
    grid-column: 1 / 2;
    grid-row: 14 / 15;
  }

  .item-15 {
    grid-column: 1 / 2;
    grid-row: 15 / 16;
  }

  .item-16 {
    grid-column: 1 / 2;
    grid-row: 16 / 17;
  }

  .item-17 {
    grid-column: 1 / 2;
    grid-row: 17 / 18;
  }

  .item-18 {
    grid-column: 1 / 2;
    grid-row: 18 / 19;
  }

  .item-19 {
    grid-column: 1 / 2;
    grid-row: 19 / 20;
  }

  .item-20 {
    grid-column: 1 / 2;
    grid-row: 20 / 21;
  }

}




/* Mobile styles */
@media (max-width: 640px) {
  .grid-container {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(20, 1fr);
    gap: 10px 10px;
    grid-template-rows: minmax(0, auto) 1fr;
  }

  h1 {
      font-size: 2em !important;
      line-height: 1.2em !important; 
   } 

.grid-item {
  margin-bottom: 30px; 
}

.item-1 {
   grid-column: 1 / 2;
   grid-row: 1 / 2;
}
  
  .item-2 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  
  .item-3 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
  
  .item-4 {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }
  
  .item-5 {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
  }
  
  .item-6 {
    grid-column: 1 / 2;
    grid-row: 6 / 7;
  }
  
  .item-7 {
    grid-column: 1 / 2;
    grid-row: 7 / 8;
  }
  
  .item-8 {
    grid-column: 1 / 2;
    grid-row: 8 / 9;
  }
  
  .item-9 {
    grid-column: 1 / 2;
    grid-row: 9 / 10;
  }
  
  .item-10 {
    grid-column: 1 / 2;
    grid-row: 10 / 11;
  }
  
  .item-11 {
    grid-column: 1 / 2;
    grid-row: 11 / 12;
  }
  
  .item-12 {
    grid-column: 1 / 2;
    grid-row: 12 / 13;
  }

  .item-13 {
    grid-column: 1 / 2;
    grid-row: 13 / 14;
  }

  .item-14 {
    grid-column: 1 / 2;
    grid-row: 14 / 15;
  }

  .item-15 {
    grid-column: 1 / 2;
    grid-row: 15 / 16;
  }

  .item-16 {
    grid-column: 1 / 2;
    grid-row: 16 / 17;
  }

  .item-17 {
    grid-column: 1 / 2;
    grid-row: 17 / 18;
  }

  .item-18 {
    grid-column: 1 / 2;
    grid-row: 18 / 19;
  }

  .item-19 {
    grid-column: 1 / 2;
    grid-row: 19 / 20;
  }

  .item-20 {
    grid-column: 1 / 2;
    grid-row: 20 / 21;
  }


}