.opening-times dl {
  display: grid;
  grid-template-columns: auto 1fr;
}

.opening-times dt,
.opening-times dd {
  display: flex;
  align-items: center;
  margin: 0;
  border-bottom: 1px solid var(--gds-mid-grey);
}

.opening-times dt:not(.empty),
.opening-times dd:not(.empty) {
  padding: 0.5rem 1rem;
}

.opening-times .hours dt:nth-of-type(even),
.opening-times .hours dd:nth-of-type(even) {
  background-color: var(--light-grey);
}

.opening-times .time-wrapper .time-pair:not(:last-child) time:last-child:after,
.changes-to-opening-hours .time-wrapper .time-pair:not(:last-child) time:last-child:after {
  content: ',';
}

.opening-times .time-grid:before,
.opening-times h2 {
  margin: 0;
  background-color: var(--primary);
  color: white;
  padding: 0.5rem 1rem;
  border-bottom: 2px solid var(--dark-grey);
}

.changes-to-opening-hours ul {
  list-style: none;
  padding: 0;
}

.changes-to-opening-hours .time-pair {
  font-weight: bold;
}

dl.meta :where(dt, dd).empty {
  display: none;
}

@media (min-width: 1024px) {
  .opening-times .time-grid {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: dense;
  }

  .opening-times .time-grid:before {
    content: '';
    display: block;
    grid-column: 1;
  }

  .opening-times .time-grid:before,
  .opening-times h2 {
    font-size: 1rem;
    grid-row: 1;
  }

  .opening-times .monday {
    grid-row: 2;
  }

  .opening-times .tuesday {
    grid-row: 3;
  }

  .opening-times .wednesday {
    grid-row: 4;
  }

  .opening-times .thursday {
    grid-row: 5;
  }

  .opening-times .friday {
    grid-row: 6;
  }

  .opening-times .saturday {
    grid-row: 7;
  }

  .opening-times .sunday {
    grid-row: 8;
  }

  .opening-times dl {
    display: contents;
  }

  .opening-times dt {
    grid-column: 1;
  }

  .opening-times .meta dt:nth-of-type(even),
  .opening-times .meta dd:nth-of-type(even) {
    background-color: var(--light-grey);
  }

  .opening-times dl:not(:first-of-type) > dt {
    display: none;
  }

  .opening-times .time-grid .time-pair {
    display: block;
  }

  dl.meta :where(dt, dd).empty {
    display: block;
  }
}