guild_front/src/components/ProfileHeader/profileHeader.scss

.profileHeader {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-family: "LabGrotesque", sans-serif;

  &__head {
    background: #e1fccf;
  }

  &__container {
    max-width: 1160px;
    padding: 0 15px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 50px;
  }

  &__title {
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 0;
    color: black;

    span {
      color: #52b709;
    }

    &:hover {
      color: black;
      text-decoration: none;
    }
  }

  &__logout {
    background: none;
    border: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 32px;
    color: #000000;
  }

  &__info {
    background: #ffffff;
  }

  &__nav {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;

    .active {
      color: #000000 !important;
    }

    a {
      text-decoration: none !important;
      cursor: pointer;
      font-weight: 700;
      font-size: 18px;
      line-height: 32px;
      color: #807777 !important;
      transition: all 0.3s ease;

      &:hover {
        color: #261a1a !important;
      }
    }

    @media (max-width: 800px) {
      column-gap: 15px;

      a {
        font-size: 12px;
      }
    }

    @media (max-width: 450px) {
      column-gap: 8px;
    }
  }

  &__personalInfo {
    display: flex;
    column-gap: 20px;
    align-items: center;

    &Name {
      margin-bottom: 0;
      font-size: 12px;
      line-height: 32px;
      max-width: 150px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      @media (max-width: 600px) {
        display: none;
      }
    }

    &Avatar {
      width: 37px;
      height: 37px;
      border-radius: 100px;
    }
  }
}