@media screen and (min-width: 600px) {
  @supports (display: grid) {
    .results {
      grid-area: ct;
      display: grid;
      grid-column-gap: 18px;
      grid-row-gap: 20px;
      grid-template-columns: repeat(12, minmax(auto, 100px));
      grid-template-areas: '. . . hero hero hero hero hero hero . . .' 'grl grl grl grl grl grl grl grl grl grl grl grl' 'rs1 rs1 rs1 rs1 rs1 rs1 rs2 rs2 rs2 rs2 rs2 rs2 ' 'mrkt mrkt mrkt mrkt mrkt mrkt mrkt mrkt mrkt mrkt mrkt mrkt ' 'rs3 rs3 rs3 rs3 rs3 rs3 rs4 rs4 rs4 rs4 rs4 rs4 ' 'rs5 rs5 rs5 rs5 rs5 rs5 rs6 rs6 rs6 rs6 rs6 rs6 '; }
    .hero {
      grid-area: hero; }
    .gridLevel {
      grid-area: grl; }
    .averageTable {
      grid-area: avt; }
    .marketLevel {
      grid-area: mrkt; }
    .result1 {
      grid-area: rs1; }
    .result2 {
      grid-area: rs2; }
    .result3 {
      grid-area: rs3; }
    .result4 {
      grid-area: rs4; }
    .result5 {
      grid-area: rs5; }
    .result6 {
      grid-area: rs6; }
    .container {
      display: flex;
      flex-direction: column; }
    .card {
      flex-grow: 1; } } }