@layer components {
  /*
   * Panel (e.g. used in sign up & log in pages)
   */
  
  .panel-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 42px;
    padding-right: 42px;
  
    @media (max-width: 991.98px) {
      padding-left: 20px;
      padding-right: 20px;
    }
  
    @media (max-width: 399.98px) {
      padding-left: 0;
      padding-right: 0;
    }
  }
  
  .panel-header {
    padding: 4.5rem 0;
  
    @media (max-width: 1199.98px) {
      padding: 3.5rem 0;
    }
  
    @media (max-width: 991.98px) {
      padding: 2.5rem 0;
    }
  
    @media (max-width: 399.98px) {
      display: none;
    }
  }
  
  .panel {
    background-color: var(--color-white);
    border: 1px solid var(--color-grey-100);
    border-top: 1px solid var(--color-primary);
    max-width: 520px;
    width: 100%;
    padding: 2rem;
  
    @media (max-width: 991.98px) {
      padding: 1.5rem;
    }
  
    @media (max-width: 399.98px) {
      border: none;
      border-bottom: 1px solid var(--color-grey-100);
      max-width: 100%;
    }
  
    .panel-form-header {
      padding-bottom: 1.5rem;
      text-align: center;
  
      @media (max-width: 399.98px) {
        text-align: left;
      }
    }
  }
  
  .panel-footer {
    padding: 2rem 0;
    text-align: center;
  }
}