.course-filter {
  background: #fff;
  padding-top: 2rem;
}
.course-filter[hidden],
#main[data-course-filter-active] article[hidden],
#main[data-course-filter-active] section[hidden] {
  display: none !important;
}
.course-filter__label {
  margin: 0 0 .75rem;
  color: #404040;
  font-size: .875rem;
  font-weight: 500;
}
.course-filter__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
}
.course-filter__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  min-height: 44px;
  padding: .625rem 1.125rem;
  border: 1px solid #d4d4d4;
  border-radius: 9999px;
  background: #fff;
  color: #262626;
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}
.course-filter__button:hover {
  border-color: #c91620;
  background: #fff5f5;
}
.course-filter__button[aria-pressed="true"] {
  border-color: #c91620;
  background: #c91620;
  color: #fff;
}
.course-filter__button:focus-visible {
  outline: 3px solid #262626;
  outline-offset: 3px;
}
.course-filter__results {
  margin: 1rem 0 0;
  color: #525252;
  font-size: .875rem;
  line-height: 1.5;
}
.course-filter:not([hidden]) + section {
  padding-top: 1.75rem;
}
@media (max-width: 479px) {
  .course-filter__buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .course-filter__button {
    padding-inline: .625rem;
  }
}