.member-menu-button{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.member-menu-button .icon{
  width: 1em;
  height: 1em;
}
.member-section > .inline-actions{
  margin-top: 1rem;
}
.member-layout{
  display: grid;
  grid-template-columns: minmax(250px, 0.36fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.member-sidebar,
.member-main{
  display: grid;
  gap: 1rem;
}
.member-sidebar{
  position: sticky;
  top: 7rem;
  align-self: start;
}
.member-profile{
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}
.member-profile-avatar{
  width: 86px;
  height: 86px;
  border: 3px solid #ffe1dc;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 20px rgba(116, 52, 52, 0.12);
}
.member-profile-avatar.large{
  width: 112px;
  height: 112px;
}
.member-profile h2{
  margin: 0 0 0.25rem;
}
.member-menu{
  display: grid;
  gap: 0.55rem;
}
.member-menu-button{
  width: 100%;
  justify-content: flex-start;
}
.member-menu-button[aria-current="page"]{
  background: var(--brand);
  color: white;
}
.member-main .section-head{
  align-items: center;
}
.member-section{
  scroll-margin-top: 92px;
}
.member-section .section-head .btn{
  flex: 0 0 auto;
  white-space: nowrap;
}
.member-profile-form{
  display: grid;
  grid-template-columns: 180px repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: end;
}
.member-profile-form label:nth-of-type(3),
.member-profile-form .inline-actions{
  grid-column: 2 / -1;
}
.member-avatar-upload{
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

@media (max-width: 1024px) {
.member-layout,
.member-profile-form{
    grid-template-columns: 1fr;
  }
.member-sidebar{
    position: static;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
  }
.member-profile-form label:nth-of-type(3),
.member-profile-form .inline-actions{
    grid-column: auto;
  }}

@media (max-width: 620px) {
.member-sidebar,
.member-profile{
    grid-template-columns: 1fr;
  }
.member-menu{
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
  }
.member-menu-button{
    flex: 0 0 auto;
    width: auto;
    min-height: 42px;
    padding-inline: 0.85rem;
    justify-content: center;
    white-space: nowrap;
  }
.member-profile{
    text-align: center;
  }
.member-profile-avatar{
    justify-self: center;
  }}