.schedule {
  margin: 0 -0.5rem;
  color: white;
  font-size: 2rem;
  line-height: 4rem;
  text-transform: uppercase;
}

.schedule:after {
  content: "";
  display: table;
  clear: both;
}

.schedule > div {
  float: left;
  margin: 0 0.5rem;
}

.schedule_title,
.schedule_fix,
.schedule_days {
  width: calc(33.333% - 1rem);
}

.schedule_variable {
  width: calc(66.666% - 1rem);
}

.schedule_title-content,
.schedule_fix-am,
.schedule_fix-pm,
.schedule_variable-content {
  padding: 0 1.2rem;
  white-space: nowrap;
}

.schedule_fix-am,
.schedule_fix-pm,
.schedule_am,
.schedule_pm {
  height: 4rem;
}

.schedule_fix-am,
.schedule_am {
  margin-bottom: 2px;
}

.schedule_am--active,
.schedule_pm--active {
  text-align: center;
  background-image: url('../assets/active.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 2rem;
}

.schedule:hover .schedule_am--active,
.schedule:hover .schedule_pm--active {
  background-image: none;
}

.schedule:hover .schedule_am--active:before,
.schedule:hover .schedule_pm--active:before {
  content: attr(data-day);
}

.schedule_title,
.schedule_variable {
  height: calc(8rem + 2px);
}

.schedule_days {
  display: flex;
}

.schedule_days > div {
  margin: 0 1px;
}

.schedule_days > div:first-of-type {
  margin-left: 0;
}

.schedule_days > div:last-of-type {
  margin-right: 0;
}

.schedule_day {
  width: 20%;
  margin: 0 1px;
}

/* SMALL */

.schedule--small {
  margin: 0 -1px;
  font-size: 1.2rem;
  line-height: 2rem;
}

.schedule--small > div {
  margin: 0 1px;
}

.schedule--small .schedule_title,
.schedule--small .schedule_fix {
  width: calc(25% - 2px);
}

.schedule--small .schedule_days {
  width: calc(50% - 2px);
}

.schedule--small .schedule_variable {
  width: calc(75% - 2px);
}

.schedule--small .schedule_title-content,
.schedule--small .schedule_fix-am,
.schedule--small .schedule_fix-pm,
.schedule--small .schedule_variable-content {
  padding: 0 0.5rem;
}

.schedule--small .schedule_fix-am,
.schedule--small .schedule_fix-pm,
.schedule--small .schedule_am,
.schedule--small .schedule_pm {
  height: 2rem;
}

.schedule--small .schedule_am--active,
.schedule--small .schedule_pm--active {
  background-size: 1rem;
}

.schedule--small .schedule_title,
.schedule--small .schedule_variable {
  height: calc(4rem + 2px);
}

@media (max-width: 768px) {
  .schedule {
    margin: 0 -1px;
    font-size: 1.2rem;
    line-height: 2rem;
  }

  .schedule > div {
    margin: 0 1px;
  }

  .schedule_title,
  .schedule_fix {
    width: calc(25% - 2px);
  }

  .schedule_days {
    width: calc(50% - 2px);
  }

  .schedule_variable {
    width: calc(75% - 2px);
  }

  .schedule_title-content,
  .schedule_fix-am,
  .schedule_fix-pm,
  .schedule_variable-content {
    padding: 0 0.5rem;
  }

  .schedule_fix-am,
  .schedule_fix-pm,
  .schedule_am,
  .schedule_pm {
    height: 2rem;
  }

  .schedule_am--active,
  .schedule_pm--active {
    background-size: 1rem;
  }

  .schedule_title,
  .schedule_variable {
    height: calc(4rem + 2px);
  }
}