.grid-container {
    display: grid;
    gap: 10px;

    padding: 10px;
    height:650px;
    position:relative;
  }
  
  .grid-item {
    background-color: rgba(246, 246, 246, 1);
    padding: 20px;
    font-size: 30px;
    position:relative;
  }
  
  .item1 {
    grid-column: 1;
    grid-row: 1;
    height:250px;
  }

  
  .item2 {
    grid-column: 2;
    grid-row: 1 / span 2;
    height:400px;
  }

  .item3 {
    grid-column: 3;
    grid-row: 1;
  }

  .item4 {
    grid-column: 1;
    grid-row: 2 / span 2;
    height:400px;
  }

  .item5 {
    grid-column: 2 ;
    grid-row: 3;
    height:250px
  }

  .item6 {
    grid-column: 3;
    grid-row: 2 / span 2 ;
  }

  .item7 {
    grid-column: 4;
    grid-row: 1 / span 3 ;
  }

  .gridbox-left{
    position: absolute;
    bottom:0;
    left:0;
    padding-left:2%
  }

  .gridbox-right{
    position: absolute;
    bottom:0;
    right:0;
  }

  .gridbox-left-pic{
    position: absolute;
    bottom:0;
    left:0;
  }

  .gridbox-right-word{
    position: absolute;
    bottom:0;
    right:0;
    padding-right:2%
  }

  .gridbox-desc{
    position: absolute;
    top:0;
    left:0;
    padding-left:2%;
    display:none;
  }

  .opacgrid{
    opacity: 60%;
    transition-property: opacity;
    transition-duration: 0.3s;
  }

  .opacgrid:hover{
    opacity: 100%;
  }

  .geofont{
    font-family: 'Geometr415 Blk BT', sans-serif;font-weight: bolder; color:black
  }

  .box-title{
    font-weight: bold;
    font-family: SB,MBP,Helvetica Neue,Helvetica,Arial,sans;
  }

  .light{
    font-weight: lighter;
    font-family: SB,MBP,Helvetica Neue,Helvetica,Arial,sans; 
  }

  .nonmobile
  {
    display:block;
  }

  .mobile
  {
    display:none;
  }

  @media (max-width: 480px) 
  {    
    .item1 {
      grid-column: 1;
      grid-row: 1;
      width:auto;
      height:auto;
    }
    .item2 {
      grid-column: 1;
      grid-row: 2;
      width:auto;
      height:auto;
    }
    .item3 {
      grid-column: 1;
      grid-row: 3;
      width:auto;
      height:auto;
    }
    .item4 {
      grid-column: 2;
      grid-row: 1;
      width:auto;
      height:auto;
    }
    .item5 {
      grid-column: 2;
      grid-row: 2;
      width:auto;
      height:auto;
    }
    .item6 {
      grid-column: 2;
      grid-row: 3;
      width:auto;
      height:auto;
    }
    .gridbox-left{
      position: absolute;
      top:0;
      left:0;
      padding-left:2%
    }
  
    .gridbox-right{
      position: absolute;
      bottom:0;
      right:0;
    }
    .nonmobile
    {
      display:none;
    }
    .mobile
    {
      display:block;
    }

  }