.grid {
    margin: 2rem 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    grid-auto-rows: 10rem;
    grid-gap: 1rem;
    grid-auto-flow: dense;
  }

  .grid-cell {
    border: solid 1px red;
    overflow: hidden;
  }
  
  @media (min-width: 360px) {
    .grid-cell.prominent {
      grid-row: span 2;
    }
  
    .grid-cell.outstanding {
      grid-column: span 2;
    }
  }
  
  @media (min-width: 520px) {
  
    .grid-cell.prominent {
      grid-column: span 2;
      grid-row: span 1;
    }
  
    .grid-cell.outstanding {
      grid-row: span 2;
      grid-column: span 2;
    }
  
    .grid-row {
      grid-column: span 3;
    }
  
  }