.dateWrapper {
  margin-bottom: var(--spacing-s);
}

.dateList {
  list-style: none;
}

.date {
  display: block;
  width: 100%;
  font-family: var(--font-serif);
  font-size: var(--font-size-body);
  position: relative;
  line-height: 1.4;
  padding: var(--spacing-s) 0;
  border-bottom: var(--border);
}

.header {
  border-bottom: var(--border);
  padding-bottom: var(--spacing-xs);
  margin-bottom: 0 !important;
  font-family: var(--font-main);
  font-size: var(--font-size-caption);
}

.header,
.time {
  width: 100%;
  display: grid;
  grid-template-columns: 3fr 1fr 2fr;
  gap: var(--spacing-m);
}

.day {
  display: inline-block;

  &:first-letter {
    text-transform: capitalize;
  }
}

.hour {
  display: inline-block;
}

.venue {
  display: inline-block;
  font-style: italic;
}

.showMore {
  margin-top: var(--spacing-s);
}

@media (max-width: 600px) {
  .header,
  .time {
    grid-template-columns: 1fr 1fr 1fr;
    font-size: var(--font-size-caption);
  }
}