#course-filter-form {
  .course-filter {
    display: none;
    padding: 20px 30px;
    align-items: center;
    gap: 30px;
    align-self: stretch;
    border-radius: 50px;
    background: var(--course-color-medium, #C4D8C8);

    @media (min-width: $breakpoint_lg) {
      display: flex;
    }

    .course-filters {
      display: flex;
      align-items: center;
      gap: 20px;
      flex: 1 0 0;
    }
  }
}

#mobile-course-filter {
  display: none;
  position: fixed;
  height: 70vh;
  bottom: 0;
  left: 0;
  width: 100vw;
  z-index: 1000;
  border-radius: 50px 50px 0 0;
  background: $medium_green;

  .mobile-filter {
    display: flex;
    padding: 10px 20px 80px 20px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    width: 100%;

    #slider-rectangle {
      width: 100px;
      height: 10px;
      flex-shrink: 0;
      border-radius: 100px;
      background: $black;
      cursor: pointer;
    }

    .course-filters {
      display: flex;
      flex-direction: column;
    }

    button {
      width: 100%;
    }
  }

  &.open {
    display: flex;
  }
}