.lottery-results {
  margin: 0 0 2rem;
}

.lottery-results__date {
  font-size: 1rem;
  font-weight: 700;
  color: #30264a;
  margin: 0 0 1rem;
}

/*
 * The theme applies "display: flex" to every table row site-wide. That makes each
 * row lay itself out independently, so the heading row and the body rows end up
 * with different column widths and the headings no longer line up with the values
 * beneath them. These rules put normal table layout back for this table only,
 * which is what keeps a column one column from top to bottom.
 */
.lottery-results__table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.lottery-results__table thead {
  display: table-header-group;
}

.lottery-results__table tbody {
  display: table-row-group;
}

.lottery-results__table tr {
  display: table-row;
  gap: 0;
}

.lottery-results__table th,
.lottery-results__table td {
  display: table-cell;
}

.lottery-results__table th,
.lottery-results__table td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
}

.lottery-results__table thead th {
  background-color: #30264a;
  color: #fff;
  font-weight: 700;
}

.lottery-results__table tbody tr {
  border-bottom: 1px solid #d1bdf2;
}

.lottery-results__table tbody tr:nth-child(odd) {
  background-color: #f7f4fd;
}

@media (max-width: 760px) {
  .lottery-results__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lottery-results__table tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #d1bdf2;
  }

  .lottery-results__table tbody td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1rem;
  }

  .lottery-results__table tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #30264a;
  }
}