.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
  }
  .item {
    padding: 3px;
  }
  .mobile-only {
    display: block;
  }
  .desktop-only {
    display: block;
  }
  @media (min-width: 768px) {
    .grid {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 4px;
    }
    .mobile-only {
      display: none;
    }
    .desktop-only {
      display: block;
    }
    
    .item-0 {
      grid-column: 1;
      grid-row: 1;
    }
    
    .item-1 {
      grid-column: 1;
      grid-row: 2;
    }
    
    .item-2 {
      grid-column: 2;
      grid-row: 1 / span 2;
    }
    
    .item-3 {
      grid-column: 3;
      grid-row: 1;
    }
    
    .item-4 {
      grid-column: 3;
      grid-row: 2;
    }
    
    .item-5 {
      grid-column: 1;
      grid-row: 3 / span 2;
    }
    
    .item-6 {
      grid-column: 2;
      grid-row: 3;
    }
    
    .item-7 {
      grid-column: 2;
      grid-row: 4;
    }
    
    .item-8 {
      grid-column: 3;
      grid-row: 3 / span 2;
    }
    
    .item-9 {
      grid-column: 1;
      grid-row: 5;
    }
    
    .item-10 {
      grid-column: 1;
      grid-row: 6;
    }
    
    .item-11 {
      grid-column: 2;
      grid-row: 5 / span 2;
    }
    
    .item-12 {
      grid-column: 3;
      grid-row: 5;
    }
    
    .item-13 {
      grid-column: 3;
      grid-row: 6;
    }
    
    .item-14 {
      grid-column: 1;
      grid-row: 7 / span 2;
    }
    
    .item-15 {
      grid-column: 2;
      grid-row: 7;
    }
    
    .item-16 {
      grid-column: 2;
      grid-row: 8;
    }
    
    .item-17 {
      grid-column: 3;
      grid-row: 7 / span 2;
    }
    
    .item-18 {
      grid-column: 1;
      grid-row: 9 / span 2;
    }
    
    .item-19 {
      grid-column: 2;
      grid-row: 9 / span 2;
    }
    
    .item-20 {
      grid-column: 3;
      grid-row: 9 / span 2;
    }

  }