@layer layouts {
  /*
   * Profile header
   */
  
  .profile-header {
    background-color: var(--color-white);
    padding: 4rem 0;
  
    @media (max-width: 639.98px) {
      padding: 2.5rem 0;
    }
  
    .profile-header-content {
      align-items: center;
      display: flex;
      flex-direction: column;
    }
  
    .profile-header-avatar {
      height: 6.25rem;
      margin-bottom: 1.5rem;
      width: 6.25rem;
  
      img {
        width: 100%;
        height: auto;
      }
    }
  
    .profile-header-title {
      margin-bottom: 1.5rem;
    }
  
    .profile-header-details {
      align-content: center;
      align-items: flex-start;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: .75rem;
  
      @media (max-width: 639.98px) {
        font-size: .938rem;
      }
  
      div,
      span {
        flex: 0 0 auto;
        margin: 0 .688rem .75rem .688rem;
  
        @media (max-width: 639.98px) {
          margin: 0 .625rem .75rem .625rem;
        }
      }
  
      .badge {
        margin-top: .125rem;
      }
  
      .icon-l {
        color: var(--color-primary);
        font-size: .875rem;
      }
    }
  
    .profile-header-languages {
      .badge-language {
        margin: 0 .125rem;
      }
    }
  }
}