.learn_index_page__title_cont {
  margin-top: 1rem;
  /*                                                     margins cancel
    50% of (100% - 6rem) of 100vh - 0.5em (selecta h1) + 1rem - 1rem
    = 50% of (100vh - 6rem) - 0.5em(selecta h1)
    = 50vh - 3rem - 0.5em(selecta h1)
    - 5rem of streamblock margin (3 on mobile)
    = 50vh - 8rem (6rem on mobile) - 0.5em
    To account for relative offsets of fonts in line:
      0.16em - 0.16h4em
      = 0.16em - 0.16 * 0.52 (0.77 on mobile) * 1em 
      = 0.0768em of deviation (0.0368 on mobile)
  */
  min-height: calc(50vh - 8rem - 0.5em + 0.0768em);
}

@media (max-width: 768px) {
  .learn_index_page__title_cont {
    min-height: calc(var(--1svh)*50 - 6rem - 0.5em + 0.0368em);
  }
}


.learn_index_page__title_cont h1 {
  margin: 0;
}

@keyframes learn_index_page_loader_spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.learn_index_page .learn_index_page__loader_cont {
  margin-top: 4rem;
  text-align: center;
}

@media (max-width: 768px) {
  .learn_index_page .learn_index_page__loader_cont {
    margin-top: 3rem;
  }
}

.learn_index_page .learn_index_page__loader_inner {
  width: 5rem;
  height: 5rem;
  margin: auto;
  background: url('./images/spinner.png') center/contain no-repeat;
  animation: learn_index_page_loader_spin 2000ms linear infinite;
}




.learn_index_page__loading {
  margin-top: 4rem;
}

@media (max-width: 768px) {
  .learn_index_page__loading {
    margin-top: 3rem;
  }
}

.learn_index_page__filters {
  margin-top: 3rem;
}

@media (max-width: 768px) {
  .learn_index_page__filters {
    margin-top: 2rem;
  }
}

/*
 * sticky filter
 */

.learn_index_page .sticky_filter_cont {
  position: fixed;
  bottom: 0;
  left: 7rem;
  z-index: 3;
  width: calc(100% - 7rem);
  animation: fadeIn 300ms ease-in;
  box-sizing: border-box;
  transition: transform 400ms opacity 200ms;
  font-size: 1.2rem;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.3rem;
}

@media (max-width: 768px) {
  .learn_index_page .sticky_filter_cont {
    left: 2.667rem;
    width: calc(100% - 2.667rem);
  }
}

.controller.is_at_bottom .learn_index_page .sticky_filter_cont {
  opacity: 0;
  pointer-events: none;
}

.controller.open .artwork_index_page .filters_cont {
  display: none;
}



/*
 * sub filters
 */

.learn_index_page .sub_filters_row {
  margin-top: 2rem;
}

.learn_index_page .filter_option_title {
  margin: 1.5rem 0 0.4rem;
}

.learn_index_page .m2m_option {
  margin-right: 3rem;
  display: inline-block;
  cursor: pointer;
}

@media (max-width: 768px) {
  .learn_index_page .m2m_option {
    display: block;
    line-height: 1.5;
  }
}

.learn_index_page .m2m_option:hover {
  opacity: 0.6;
}

.learn_index_page .m2m_option.active {
  text-decoration: underline;
}