.contents {
  display: contents;
}

@media (max-width: 640px) {
  .desktop-only {
    display:none
  }
  
  table {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 50px) 20px repeat(4, 50px) 20px repeat(4, 50px);
    grid-template-areas:
      'header-a'
      'row1-a'
      'row2-a'
      'row3-a'
      '.'
      'header-b'
      'row1-b'
      'row2-b'
      'row3-b'
      '.'
      'header-c'
      'row1-c'
      'row2-c'
      'row3-c';
  }
}

@media (min-width: 640px) {
  table {
    display: grid;
    grid-template-columns: repeat(4, 160px);
    grid-template-rows: repeat(4, 70px);
    grid-template-areas: 
      '.            header-a  header-b  header-c'
      'row1-header  row1-a    row1-b    row1-c'
      'row2-header  row2-a    row2-b    row2-c'
      'row3-header  row3-a    row3-b    row3-c';
  }
}

#card-a {
  grid-row: header-a /  span 4;
  grid-column: header-a / span 1;
}

#card-b {
  grid-row: header-b /  span 4;
  grid-column: header-b / span 1;
}

#card-c {
  grid-row: header-c /  span 4;
  grid-column: header-c / span 1;
}

#separator-1 {
  grid-row: row1-header / span 1;
  grid-column: row1-header / span 4;
}

#separator-2 {
  grid-row: row2-header / span 1;
  grid-column: row2-header / span 4;
}

#separator-3 {
  grid-row: row3-header / span 1;
  grid-column: row3-header / span 4;
}

/* BEGIN COSMETICS */
html {
  padding: 20px;
  font-family: Trebuchet MS, sans-serif;
  background: #FAFAFA;
}

body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: #F9FAFB;
}

table {
  grid-gap: 0 16px;
}

thead td {
  font-size: 20px;
  text-decoration: underline;
  font-weight: 500;
}

td {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-size: 14px;
  text-align: center;
}

tr td:first-of-type {
  font-weight: 500;
  justify-content: flex-start;
  color: #71717A;
}

.card {
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
}

.separator {
  border-top: 1px solid #991B1B;
}

#card-a {
  background: #52525B;
}

#card-b {
  background: #27272A;
}

#card-c {
  background: #DC2626;
}
/* END COSMETICS */