.header-container {
  padding: 0 24px;
  height: var(--height-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;

  .header-left-side {
    display: flex;
    gap: 16px;
    align-items: center;

    .header-title {
      font-size: 1.8rem;
      font-weight: 700;
      color: #4d4d4d;
    }
  }

  .header-right-side {
    display: flex;
    align-items: center;
    gap: 16px;

    .header-name {
      font-size: 1.8rem;
      font-weight: 700;
      color: #4d4d4d;
    }

    .header-avatar {
      width: 40px;
      height: 40px;
      object-fit: cover;
      box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px,
        rgba(0, 0, 0, 0.24) 0px 1px 2px;
      border-radius: 50%;

      @media screen and (max-height: 800px) {
        width: 32px;
        height: 32px;
      }
    }
  }
}