// 3 equally sized columns on desktop, 1 column on mobile
// classes: grid-container, grid-item, grid-section
sS hcss_gridStyle(O... _) {
  optPar S rowHeight;
  
  ret hcss([[
    .grid-container {
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto;
      grid-gap: 10px;
      padding: 10px;
    }

    .grid-item {
      padding: 10px;
    }
    
    .grid-section {
      width: 100%;
      padding-bottom: 10px;
    }

    @media (max-width: 600px) {
      .grid-container {
        display: block;
      }
    }
    
    @media (min-width: 601px) {
      .grid-container {
        display: grid;
      }
      
      .grid-item {
        ]] + (empty(rowHeight) ? "" : "min-height: " + rowHeight + ";") + [[
        padding-bottom: 20px;
      }
      
      .grid-section {
        ]] + stringIf(nempty(rowHeight), "height: 100%;") + [[
      }
    }
  ]]);
}