diff --git a/weblog/B0. Template/styles.css.md b/weblog/B0. Template/styles.css.md
index acad3dd..ebe86c5 100644
--- a/weblog/B0. Template/styles.css.md	
+++ b/weblog/B0. Template/styles.css.md	
@@ -401,15 +401,8 @@ fedi-social i::before {
   line-height: 48px;
 }
 
-
-
-main.page {
-  position: relative;
-}
-
-
-main.page:has(>.home)::before,
-main.page:has(>.home)::after {
+main.page:has(>#details)::before,
+main.page:has(>#details)::after {
   content: '';
   position: absolute;
   left: -2px;
@@ -423,34 +416,51 @@ main.page:has(>.home)::after {
   border-radius: 1em;
 }
 
-main.page:has(>.home)::after {
+main.page:has(>#details)::after {
   filter: blur(50px);
 }
 
-.home img.u-photo {
+
+main.page:has(>#details){
+  display: grid;
+  grid-template-columns: 1fr 0.95fr;
+  /* grid-template-rows: 1fr 1fr; */
+  grid-template-areas: "details bio" "details profile-items";
+  column-gap: 1.5rem;
+}
+
+#details {
+  grid-area: details;
+  text-align: center;
+}
+
+#bio {
+  grid-area: bio;
+  text-align: center;
+}
+
+#profile-items {
+  grid-area: profile-items;
+}
+
+@media (max-width:720px) {
+  main.page:has(>#details){
+    display:flex;
+  }
+  #details {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+#profile-picture {
   border-radius: 50%;
   max-height: 200px;
   max-width: 200px;
   box-shadow: 0 0 1em 1px var(--primary-muted), 0 0 .5em 1px var(--white-glow);
 }
 
-.home{
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2em;
-  flex-direction: row;
-  align-items: center;
-}
-.home>*{
-  flex: 1;
-  min-width: 17em;
-  text-align: left;
-}
-.home>:first-child {
-  text-align: center;
-}
-
-.home>nav ul {
+#profile-items>ul {
   display: flex;
   flex-direction: column;
   gap: 0.5em;