@layer layouts {
  /*
   * Account settings
   */
  
  /* Two-column layout with sidebar */
  .account-settings-layout {
    display: flex;
    margin-left: -12px;
    margin-right: -12px;
  
    @media (max-width: 1439.98px) {
      margin-left: -10px;
      margin-right: -10px;
    }
  
    @media (max-width: 991.98px) {
      margin-left: -8px;
      margin-right: -8px;
    }
  }
  
  .account-settings-sidebar {
    flex: 0 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    width: 25%;
  
    @media (max-width: 1439.98px) {
      padding-left: 10px;
      padding-right: 10px;
    }
  
    @media (max-width: 991.98px) {
      padding-left: 8px;
      padding-right: 8px;
      width: 33.333333%;
    }
  }
  
  .account-settings-main {
    flex: 0 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    width: 75%;
  
    @media (max-width: 1439.98px) {
      padding-left: 10px;
      padding-right: 10px;
    }
  
    @media (max-width: 991.98px) {
      padding-left: 8px;
      padding-right: 8px;
      width: 66.666667%;
    }
  
    @media (max-width: 639.98px) {
      width: 100%;
    }
  }
  
  .account-settings {
    padding: 5rem 0;
  
    @media (max-width: 991.98px) {
      padding: 4rem 0;
    }
  
    @media (max-width: 639.98px) {
      padding: 3rem 0;
    }
  }
  
  .account-settings-content {
    .account-settings-select {
      margin-bottom: 1.5rem;
    }
  
    .form {
      margin-top: 2.5rem;
      max-width: 30rem;
  
      label {
        margin-bottom: .75rem;
      }
  
      h4 {
        text-align: left;
      }
  
      .control {
        border-top: 1px solid var(--color-grey-100);
        padding-top: 1.125rem;
      }
  
      .control-indicator {
        top: 1.25rem;
      }
  
      .btn {
        min-width: 10rem;
      }
    }
  
    .avatar-uploaded {
      height: 8rem;
      width: 8rem;
  
      img {
        width: 100%;
        height: auto;
      }
    }
  }
}