.Schedule-monthSelector {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: start;
  margin-bottom: var(--spaces);
  font-size: 1.125rem;
  text-align: center;
  cursor: pointer;
}

@media screen and (min-width: 1024px) {

.Schedule-monthSelector {
    display: inline-flex;
    text-align: left;
    text-align: initial;
}
  }

.Schedule-monthSelector .Months {
    position: absolute;
    z-index: 20;
    top: 55px;
    width: 100%;
    transform: scaleY(0);
    transform-origin: top;
  }

.Schedule-monthSelector .Month {
    padding: var(--spaces);
    color: var(--clr-primary);
    cursor: pointer;
  }

.Schedule-monthSelector .Month.is--selected,
    .Schedule-monthSelector .Month:hover:not(.Month-placeholder) {
      font-weight: 600;
    }

.Schedule-monthSelector .Month.Month-placeholder {
      font-weight: 600;
      color: var(--clr-black);
    }

@media screen and (min-width: 1024px) {

.Schedule-monthSelector .Month.Month-placeholder {
        padding-right: calc(var(--spaces) * 5);
    }
      }

.Schedule-monthSelector svg {
    position: absolute;
    top: calc(var(--spaces) * 1.125);
    right: var(--spaces);
    width: var(--spaces);
    pointer-events: none;
    transition: transform 200ms ease-in-out;
  }

.Schedule-monthSelector .toggle-checkbox {
    display: none;
    visibility: hidden;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }

.Schedule-monthSelector .toggle-checkbox:checked ~ .Months {
    transform: scaleY(1);
  }

.Schedule-monthSelector .toggle-checkbox:checked ~ svg {
    transform: rotate(180deg);
  }

.Schedule--home .Schedule-monthSelector {
    margin-bottom: var(--spaces);
  }

.Schedule--home .Schedule-monthSelector .Months {
      top: 84px;
    }

.Schedule--home .Schedule-monthSelector .Month-placeholder {
      padding: calc(var(--spaces) * 2);
      padding-left: var(--spaces);
    }

@media screen and (min-width: 1024px) {

.Schedule--home .Schedule-monthSelector .Month-placeholder {
        padding-right: calc(var(--spaces) * 5);
    }
      }

.Schedule--home .Schedule-monthSelector svg {
      top: calc(var(--spaces) * 2.125);
    }

@media screen and (min-width: 1024px) {

.Schedule--home .Schedule-monthSelector {
      margin-bottom: 0;
  }
    }