/* Only on phones... */
@media screen and (max-width: 640px) {
  /* Turn the table into a list of grids. */
  table, tbody {
    display: flex;
    flex-direction: column;
  }

  /* Table borders get very cluttered on small screens. */
  table * {
    border: none;
  }

  /* Render each row as a two-row grid instead. */
  tr {
    display: grid;
    grid-template-areas:
      "brewer name abv type"
      "blurb blurb blurb blurb";
    grid-template-columns: 1fr 2fr 3rem 3rem;
    border-bottom: 1px solid black;
  }

  /* Hide the header row as it becomes confusing */
  tr:nth-child(1) {
    display: none;
  }

  tr td:nth-child(1) {
    font-weight: bold;
    grid-area: brewer;
  }
  tr td:nth-child(2) {
    font-weight: bold;
    grid-area: name;
  }
  tr td:nth-child(2)::before,
  tr td:nth-child(2)::after {
    content: "\"";
  }
  tr td:nth-child(3) {
    grid-area: abv;
    display: flex;
    text-align: center;
  }
  tr td:nth-child(3)::after {
    content: "%";
  }
  tr td:nth-child(4) {
    grid-area: type;
  }
  tr td:nth-child(5) {
    grid-area: blurb;
  }
}