.wrap {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  flex-direction: column;
}

.avatar {
  width: 100%;
  padding-bottom: 50%;
  border-radius: $radius 0 0 0;
  background: 50% 50% no-repeat;
  background-size: cover;
}

.region_wrap {
  width: 100%;
  padding: 0 10px;
  position: relative;
  margin-top: -$radius;
  box-sizing: border-box;
}

.region {
  background: $content_bg;
  width: 100%;
  border-radius: $radius;
}

.name {
  font: $font_24_semibold;
  color: white;
  padding: $gap $gap 0 $gap;
  text-transform: uppercase;
  width: 100%;
  box-sizing: border-box;
}

.username {
  font: $font_14_semibold;
  padding: 0 $gap $gap $gap;
  box-sizing: border-box;
  width: 100%;
  color: transparentize(white, 0.5);
}

.menu {
  padding: $gap 0 $gap 0;
  display: flex;
  align-items: stretch;
  width: 100%;
  flex-direction: column;
  box-sizing: border-box;
  display: none;

  a {
    width: 100%;
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    font: $font_18_semibold;
    padding: $gap $gap;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    opacity: 0.5;
    box-sizing: border-box;
    transition: opacity 0.25s;

    &:hover {
      opacity: 1;
    }
  }

  svg {
    margin-right: $gap;
    fill: currentColor;
  }
}

.description {
  padding: $gap;
  box-sizing: border-box;
  background: darken($content_bg, 4%);
  margin: 0 $gap;
  border-radius: 0 0 $radius $radius;
}