@layer components {
  /*
   * Filters
   */
  
  .search-box {
    display: none;
  }
  
  .filters {
    background-color: var(--color-white);
    box-shadow: 0px 0px 32px 0px rgb(var(--rgb-black) / 0.32);
    display: none;
    height: 100vh;
    overflow: auto;
    padding: 2.5rem 0;
    position: fixed !important;
    width: 20rem;
    z-index: 10;
  
    @media (max-width: 1439.98px) {
      padding: 2rem 0;
    }
  
    @media (max-width: 1199.98px) {
      padding: 1.5rem 0;
    }
  
    @media (max-width: 991.98px) {
      padding: 1rem 0;
    }
  
    @media (max-width: 639.98px) {
      padding: 0.75rem 0;
    }
  
    .filters-header {
      border-bottom: 1px solid var(--color-grey-100);
      padding-bottom: 2.5rem;
  
      @media (max-width: 1439.98px) {
        padding-bottom: 2rem;
      }
  
      @media (max-width: 1199.98px) {
        padding-bottom: 1.5rem;
      }
  
      @media (max-width: 991.98px) {
        padding-bottom: 1rem;
      }
  
      @media (max-width: 639.98px) {
        padding-bottom: 0.75rem;
      }
    }
  
    .filters-header-content {
      align-items: center;
      display: flex;
      justify-content: space-between;
      padding-left: 3.75rem;
      padding-right: 3.75rem;
  
      @media (max-width: 1439.98px) {
        padding-left: 3.125rem;
        padding-right: 3.125rem;
      }
  
      @media (max-width: 1199.98px) {
        padding-left: 2.625rem;
        padding-right: 2.625rem;
      }
  
      @media (max-width: 991.98px) {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
      }
  
      @media (max-width: 639.98px) {
        padding-left: 1rem;
        padding-right: 1rem;
      }
    }
  
    .filters-content {
      padding-left: 3.75rem;
      padding-right: 3.75rem;
  
      @media (max-width: 1439.98px) {
        padding-left: 3.125rem;
        padding-right: 3.125rem;
      }
  
      @media (max-width: 1199.98px) {
        padding-left: 2.625rem;
        padding-right: 2.625rem;
      }
  
      @media (max-width: 991.98px) {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
      }
  
      @media (max-width: 639.98px) {
        padding-left: 1rem;
        padding-right: 1rem;
      }
    }
  }
}