homework 2 done

src/components/profile/personal-information/personal-information.module.scss

@@ -0,0 +1,95 @@
+.card {
+  max-width: 413px;
+  padding: 33px 33px 41px;
+}
+
+.photoContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 6px;
+
+  > div {
+    position: relative;
+
+    > img {
+      width: 96px;
+      height: 96px;
+      object-fit: cover;
+      border-radius: 50%;
+    }
+
+    > .editAvatarButton {
+      all: unset;
+
+      cursor: pointer;
+
+      position: absolute;
+      right: 0;
+      bottom: 0;
+
+      width: 32px;
+      height: 32px;
+
+      &:focus-visible {
+        outline: var(--outline-focus);
+      }
+    }
+  }
+}
+
+.buttonContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  margin-bottom: 27px;
+  text-align: center;
+}
+
+.nameWithEditButton {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+}
+
+.name {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+.editNameButton {
+  all: unset;
+
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 16px;
+  height: 16px;
+
+  &:focus-visible {
+    outline: var(--outline-focus);
+  }
+}
+
+.email {
+  margin-bottom: 13px;
+  color: var(--color-dark-100);
+  text-align: center;
+}
+
+.caption {
+  margin-bottom: 11px;
+  text-align: center;
+}
+
+.signInLink {
+  display: flex;
+  justify-content: center;
+}