.title {
  padding: 1.5em 0.75em 0.5em 0.75em;
}

.slot-time span {
  border-bottom: 2px solid var(--color-main);
  padding-bottom: 0.25em;
}

.schedule-item {
  padding: 0.5em 0.75em;
  margin: 0.25em;
}

.schedule-item i {
  padding-right: 0.5em;
}

.event {
  border: 2px solid var(--color-main);
  border-radius: 0.5em;
}

.room1 {
  background-color: var(--color-room1);
}

.room2 {
  background-color: var(--color-room2);
}

.room3 {
  background-color: var(--color-room3);
}

.room4 {
  background-color: var(--color-room4);
}

.dbl-slot {
  grid-row-end: span 2;
}

.dbl-track {
  grid-column-end: span 2;
}

.all-tracks {
  grid-column-end: span 4;
}

.info-button {
  font-size: 0.75em;
  vertical-align: super;
  color: inherit;
  cursor: pointer;
  padding-left: 1pt;
}

.info-button:hover {
  color: inherit;
}

@media (min-width: 768px) {
  .schedule {
    display: grid;
    grid-template-columns: auto repeat(4, 1fr);
  }
}