Agent profile block changes

blocks/agent-profile/agent-profile.css

@@ -1,98 +1,101 @@
 .agent-profile {
   display: flex;
-  padding: 0 16px 0 16px;
+  padding: 0 1rem;
 }
 
 .agent-profile .profile-image img {
   width: 150px;
   height: 190px;
-  /* display: block; */
 }
 
 .agent-profile .profile-content {
-  padding-left: 15px;
+  padding-left: 1rem;
 }
 
 .agent-profile .profile-content .name {
-  font-size: 22px;
-  line-height: 26px;
-  margin-bottom: 8px;
+  font-size: var(--body-font-size-xl);
+  line-height: var(--line-height-m);
+  margin-bottom: 0.5rem;
 }
 
 .agent-profile .profile-content .designation {
   text-transform: uppercase;
-  font-family: "Manrope";
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    letter-spacing: normal;
-    line-height: 130%;
-    color: #2a2223;
-    padding-bottom: 4px;
-
-  /* font-family: "Manrope";
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    letter-spacing: normal;
-    line-height: 130%;
-    color: #2a2223; */
+  font-size: 0.75rem;
+  line-height: var(--line-height-m);
+  padding-bottom: 0.25rem;
 }
 
 .agent-profile .profile-content .license-number {
   font-size: 14px;
-  margin-bottom: 8px;;
-}
-
-.agent-profile .profile-content .email a {
-  margin-top: 4px;
-  line-height: 1;
-  font-size: 14px;
-  color: black;
-  text-transform: lowercase;
-  margin-bottom: 8px;
+  margin-bottom: 0.5px;
 }
 
+.agent-profile .profile-content .email a,
 .agent-profile .profile-content .website a {
-  margin-top: 4px;
-  line-height: 1;
+  margin-top: 0.25rem;
   font-size: 14px;
-  color: black;
+  color: var(--black);
   text-transform: lowercase;
-  margin-bottom: 8px;
-  /* word-break: break-word; */
-}
-
-.agent-profile .profile-content .website {
-  margin-bottom: 4px;
+  margin-bottom: 0.5rem
 }
 
+.agent-profile .profile-content .website,
 .agent-profile .profile-content .email {
-  margin-bottom: 4px;
+  margin-bottom: 0.25rem;
 }
 
 .agent-profile .profile-content .phone {
   font-size: 14px;
 }
 
 .agent-profile .profile-content .phone li {
-  margin-bottom: 4px;
+  margin-bottom: 0.25rem;
 }
 
 .agent-profile .profile-content .social>a {
-  margin-right: 16px;
+  margin-right: 1rem;
 }
 
 @media (min-width: 1200px) {
-  .agent-profile {
+  .agent-profile-container {
+    position: relative;
+  }
+
+  .agent-profile-wrapper {
     position: absolute;
     display: flex;
     left: auto;
     width: 575px;
     right: 0;
-    bottom: 0;
-    padding: 30px 30px 0 30px;
+    bottom: 65px;
+    padding: 30px 30px 0;
     z-index: 1;
     word-break: break-word;
+    background-color: white;
+  }
+
+  .agent-profile {
+    position: relative;
+    line-height: 150%;
+  }
+
+  .agent-profile .profile-image img {
+    width: 210px;
+    height: 249px;
+  }
+
+  .agent-profile .profile-content .phone {
+    font-size: 16px;
+    margin-top: 2px;
+    line-height: 150%;
+  }
+
+  .agent-profile .profile-content .email a,
+  .agent-profile .profile-content .website a {
+    font-size: 1rem;
+  }
+
+  .agent-profile .profile-content {
+    padding-left: 30px;
   }
 }

blocks/agent-profile/agent-profile.js

@@ -1,31 +1,25 @@
 import { div } from '../../scripts/dom-helpers.js';
 
 export default async function decorate(block) {
-
-  console.log(block);
   const children = [...block.children];
-  const profileImage = div({ class: "profile-image" });
-  const profileContent = div({ class: "profile-content" })
+  const profileImage = div({ class: 'profile-image' });
+  const profileContent = div({ class: 'profile-content' });
 
   children.forEach((x, index) => {
-    console.log(x);
     const firstGrandChild = x.children[0];
     const secondGrandChild = x.children[1];
     const firstGrandChildTextContent = firstGrandChild.textContent.toLowerCase().replace(/\s+/g, '-');
     secondGrandChild.classList.add(firstGrandChildTextContent);
 
-    if (firstGrandChildTextContent)
-
     if (index === 0) {
       profileImage.append(secondGrandChild.querySelector('picture'));
     } else {
+      if (firstGrandChildTextContent === 'website' || firstGrandChildTextContent === 'email') {
+        secondGrandChild.classList.remove('button-container');
+      }
       profileContent.append(secondGrandChild);
     }
   });
 
   block.replaceChildren(profileImage, profileContent);
-  // block.innerHTML = '';
-  // block.append(profileImage, profileContent);
-
-  console.log(children);
 }