From 5f0113465cef80f5c40c7c781c2ebe02c9400e2d Mon Sep 17 00:00:00 2001
From: Piyush Jindal <jindaliiita@gmail.com>
Date: Fri, 9 Aug 2024 12:00:14 +0530
Subject: [PATCH] Agent Profile Design 1 changes (#258)

* Agent Profile Design 1 changes

* Agent Profile design 1 and base design, removed address and agent about block

* media query changes

---------

Co-authored-by: piyushjindal <piyushjindal@adobe.com>
---
 blocks/agent-about/agent-about.css            |  98 ---------
 blocks/agent-about/agent-about.js             |  78 -------
 blocks/agent-address/agent-address.css        |  35 ----
 blocks/agent-address/agent-address.js         |  22 --
 blocks/agent-profile/agent-profile.css        | 192 ++++++++++++++----
 blocks/agent-profile/agent-profile.js         |  92 ++++++++-
 blocks/agent-profile/design-1.css             | 190 +++++++++++++++++
 .../agent-transactions/agent-transactions.css |   2 +-
 8 files changed, 429 insertions(+), 280 deletions(-)
 delete mode 100644 blocks/agent-about/agent-about.css
 delete mode 100644 blocks/agent-about/agent-about.js
 delete mode 100644 blocks/agent-address/agent-address.css
 delete mode 100644 blocks/agent-address/agent-address.js
 create mode 100644 blocks/agent-profile/design-1.css

diff --git a/blocks/agent-about/agent-about.css b/blocks/agent-about/agent-about.css
deleted file mode 100644
index 96ab9dae..00000000
--- a/blocks/agent-about/agent-about.css
+++ /dev/null
@@ -1,98 +0,0 @@
-.agent-about.block {
-  display: flex;
-  flex-direction: column;
-  margin-top: 3rem;
-  line-height: var(--line-height-m);
-  font-size: var(--body-font-size-xs);
-  letter-spacing: normal;
-}
-
-.agent-about.block .hide {
-  display: none;
-}
-
-.agent-about.block a.view-more::after,
-.agent-about.block a.view-less::after {
-  display: inline-block;
-  margin-top: 1rem;
-  text-decoration: underline;
-  font-size: var(--body-font-size-xs);
-  color: var(--black);
-}
-
-.agent-about.block a.view-more::after {
-  content: "View More";
-}
-
-.agent-about.block a.view-less::after {
-  content: "View Less";
-}
-
-.agent-about.block>div.cols-1,
-.agent-about.block>div.cols-2 {
-  padding-bottom: 2rem;
-}
-
-.agent-about.block>div>div:first-of-type {
-  font-size: var(--body-font-size-s);
-  font-weight: var(--font-weight-bold);
-  margin-bottom: 0.5rem;
-  text-transform: capitalize;
-}
-
-.agent-about.block ul {
-  list-style: unset;
-  margin: 0 0 0 1.25rem;
-}
-
-@media (min-width: 600px) {
-  .agent-about.block {
-    flex-direction: row;
-  }
-
-  .agent-about.block>div.cols-1 {
-    flex: 0 0 41.6667%;
-    max-width: 41.6667%;
-    padding-right: 1rem;
-  }
-  
-  .agent-about.block>div.cols-2 {
-    flex: 0 0 33.33%;
-    max-width: 33.33%;
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  .agent-about.block>div.cols-3 {
-    flex: 0 0 25%;
-    max-width: 25%;
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-}
-
-@media (min-width: 900px) {
-  .agent-about.block>div.cols-1 {
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-  
-  .agent-about.block>div.cols-2,
-  .agent-about.block>div.cols-3 {
-    flex: 0 0 25%;
-    max-width: 25%;
-  }
-
-  .agent-about.block {
-    font-size: var(--body-font-size-s);
-  }
-  
-  .agent-about.block>div>div:first-of-type {
-    font-size: var(--body-font-size-m);
-  }
-
-  .agent-about.block a.view-more::after,
-  .agent-about.block a.view-less::after {
-    font-size: var(--body-font-size-s);
-  }
-}
diff --git a/blocks/agent-about/agent-about.js b/blocks/agent-about/agent-about.js
deleted file mode 100644
index fabeecae..00000000
--- a/blocks/agent-about/agent-about.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import { getMetadata } from '../../scripts/aem.js';
-import {
-  a, div, ul, li,
-} from '../../scripts/dom-helpers.js';
-
-const viewMoreOnClick = (name, anchor, block) => {
-  anchor.addEventListener('click', () => {
-    if (anchor.classList.contains('view-more')) {
-      anchor.classList.remove('view-more');
-      anchor.classList.add('view-less');
-      block.querySelector(`.${name}`).classList.remove('hide');
-      block.querySelector(`.${name}-truncate`).classList.add('hide');
-    } else {
-      anchor.classList.remove('view-less');
-      anchor.classList.add('view-more');
-      block.querySelector(`.${name}`).classList.add('hide');
-      block.querySelector(`.${name}-truncate`).classList.remove('hide');
-    }
-  });
-};
-
-const getCol = (list, colText) => {
-  const colsUl = ul();
-  list.split(',').forEach((x) => {
-    colsUl.append(li(x.trim()));
-  });
-  return div(div(colText), div(colsUl));
-};
-
-export default function decorate(block) {
-  const aboutText = getMetadata('about');
-  const accreditations = getMetadata('professional-accreditations');
-  const languages = getMetadata('languages');
-
-  block.replaceChildren(div(div('About'), div(aboutText)),
-    getCol(accreditations, 'Professional Accreditations'),
-    getCol(languages, 'Languages'));
-
-  const children = [...block.children];
-  if (children?.length) {
-    children.forEach((child, index) => {
-      child.classList.add(`cols-${index + 1}`);
-      if (index === 0) {
-        const name = 'about-text';
-        const threshold = 245;
-        child.children[1].classList.add(name);
-        if (child.children[1].textContent > threshold) {
-          child.children[1].classList.add('hide');
-          child.append(div({ class: `${name}-truncate` },
-            `${child.children[1].textContent.substring(0, threshold)}...`));
-          const anchor = a({ class: 'view-more', href: '#' });
-          child.append(anchor);
-          viewMoreOnClick(name, anchor, block);
-        }
-      } else {
-        const threshold = 3;
-        const name = child.children[0].textContent.toLowerCase().replace(/\s/g, '-');
-        const liItems = child.children[1].querySelectorAll('li');
-        child.children[1].classList.add(name);
-
-        if (liItems.length > threshold) {
-          child.children[1].classList.add('hide');
-          const tempUl = ul();
-          Array.from(child.children[1].querySelectorAll('li'))
-            .slice(0, threshold).forEach((liItem) => {
-              const tempLi = li(liItem.textContent);
-              tempUl.append(tempLi);
-            });
-
-          child.append(div({ class: `${name}-truncate` }, tempUl));
-          const anchor = a({ class: 'view-more', href: '#' });
-          child.append(anchor);
-          viewMoreOnClick(name, anchor, block);
-        }
-      }
-    });
-  }
-}
diff --git a/blocks/agent-address/agent-address.css b/blocks/agent-address/agent-address.css
deleted file mode 100644
index bc074896..00000000
--- a/blocks/agent-address/agent-address.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.agent-address.block {
-  padding: 2rem;
-  background-color: var(--tertiary-color);
-}
-
-.agent-address.block .address {
-  margin-bottom: 2rem;
-}
-
-.agent-address.block .address>p {
-  margin-bottom: 0;
-  font-size: var(--body-font-size-xs);
-}
-
-.agent-address.block a {
-  border: 1px solid var(--primary-color);
-  color: var(--primary-color);
-  font-weight: var(--font-weight-bold);
-  letter-spacing: var(--letter-spacing-m);
-  text-transform: uppercase;
-  padding: 0.5rem 1rem;
-  text-decoration: none;
-  font-size: var(--body-font-size-s);
-}
-
-.agent-address.block a:hover {
-  color: var(--primary-light);
-  background-color: var(--primary-color);
-}
-
-@media (min-width: 600px) {
-  .agent-address.block {
-    display: none;
-  }
-}
diff --git a/blocks/agent-address/agent-address.js b/blocks/agent-address/agent-address.js
deleted file mode 100644
index 4cd12dee..00000000
--- a/blocks/agent-address/agent-address.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { getMetadata } from '../../scripts/aem.js';
-import {
-  a, div, p,
-} from '../../scripts/dom-helpers.js';
-
-export default function decorate(block) {
-  const streetAddress = getMetadata('street-address');
-  const city = getMetadata('city');
-  const state = getMetadata('state');
-  const zip = getMetadata('zip');
-
-  const textDiv = div({ class: 'address' },
-    p('Berkshire Hathaway HomeServices'),
-    p('Commonwealth Real Estate'),
-    p(streetAddress),
-    p(`${city}, ${state} ${zip}`),
-  );
-  const text = `${streetAddress}, ${city}, ${state} ${zip}`;
-
-  const anchor = a({ href: `https://maps.google.com/maps?q=${text}`, target: '_blank' }, 'Directions');
-  block.replaceChildren(textDiv, anchor);
-}
diff --git a/blocks/agent-profile/agent-profile.css b/blocks/agent-profile/agent-profile.css
index fa575e7f..a4885da1 100644
--- a/blocks/agent-profile/agent-profile.css
+++ b/blocks/agent-profile/agent-profile.css
@@ -1,20 +1,12 @@
+@import url('./design-1.css');
+
 .agent-profile.block {
-  display: flex;
   padding: 0 1rem;
+  gap: 3rem;
 }
 
-main .section.agent-profile-container .agent-profile-wrapper {
-  word-break: break-word;
-}
-
-.agent-profile.block .profile-image img {
-  width: 9.375rem;
-  height: 11.875rem;
-}
-
-.agent-profile.block .profile-content .contact-me {
-  margin-top: 1.5rem;
-  display: none;
+.agent-profile.block .profile-details {
+  display: flex;
 }
 
 .agent-profile.block .profile-content {
@@ -22,31 +14,71 @@ main .section.agent-profile-container .agent-profile-wrapper {
   font-size: var(--body-font-size-s);
 }
 
-.agent-profile.block .profile-content .name {
+.agent-profile.block .profile-content > div {
+  margin-bottom: 0.5rem;
+}
+
+.agent-profile.block .profile-content h1 {
   font-size: var(--body-font-size-xl);
   line-height: var(--line-height-m);
-  margin-bottom: 0.5rem;
+  font-weight: var(--font-weight-bold);
 }
 
 .agent-profile.block .profile-content .designation,
 .agent-profile.block .profile-content .license-number {
   font-size: var(--body-font-size-xs);
   text-transform: uppercase;
-  margin-bottom: 0.25rem;
+}
+
+main .section.agent-profile-container .agent-profile-wrapper {
+  word-break: break-word;
+}
+
+.agent-profile.block .profile-image img {
+  width: 9.375rem;
+  aspect-ratio: 1 / 1.5;
+  object-fit: cover;
+}
+
+.agent-profile.block .profile-content .contact-me {
+  display: none;
+}
+
+.agent-profile.block .lang-prof-accred ul {
+  margin-top: 1rem;
 }
 
 .agent-profile.block .profile-content .social ul {
   display: flex;
-  margin-top: 1rem;
-  opacity: .5;
+}
+
+.agent-profile.block .lang-prof-accred li {
+  list-style: outside;
+  margin-left: 1rem;
+}
+
+.agent-profile.block .profile-content .phone li {
+  margin-bottom: 0.5rem;
 }
 
 .agent-profile.block .profile-content .social li {
   margin-right: 0.5rem;
 }
 
+.agent-profile.block .address a {
+  border: 1px solid var(--primary-color);
+  color: var(--primary-color);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: var(--letter-spacing-m);
+  text-transform: uppercase;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  font-size: var(--body-font-size-xs);
+}
+
 .agent-profile.block .profile-content .email a,
 .agent-profile.block .profile-content .website a {
+  line-height: var(--line-height-xs);
   font-size: var(--body-font-size-xs);
   color: var(--black);
   text-transform: lowercase;
@@ -63,27 +95,106 @@ main .section.agent-profile-container .agent-profile-wrapper {
   text-decoration: none;
 }
 
-.agent-profile.block .profile-content .contact-me a:hover {
+.agent-profile.block .address a:hover {
   color: var(--primary-light);
   background-color: var(--primary-color);
 }
 
-.agent-profile.block .profile-content .website,
-.agent-profile.block .profile-content .email {
-  margin-bottom: 0.25rem;
+.agent-profile.block .profile-content .contact-me a:hover {
+  color: var(--primary-light);
+  background-color: var(--primary-color);
 }
 
 .agent-profile.block .profile-content .phone {
   font-size: var(--body-font-size-xs);
 }
 
-.agent-profile.block .profile-content .phone li {
-  margin-bottom: 0.25rem;
+.agent-profile.block .address {
+  padding: 2rem;
+  background-color: var(--tertiary-color);
+  margin-top: 1.5rem;
+}
+
+.agent-profile.block .address>p {
+  margin-bottom: 0;
+  font-size: var(--body-font-size-xs);
+}
+
+.agent-profile.block .address>p:last-of-type {
+  margin-bottom: 2rem;
+}
+
+.agent-profile.block .about-non-truncate.hide,
+.agent-profile.block .languages-non-truncate.hide,
+.agent-profile.block .professional-accreditations-non-truncate.hide,
+.agent-profile.block .about-truncate.hide,
+.agent-profile.block .languages-truncate.hide,
+.agent-profile.block .professional-accreditations-truncate.hide {
+  display: none;
+}
+
+.agent-profile.block .about {
+  margin: 1rem 0 2rem;
+  font-size: var(--body-font-size-s);
+  line-height: var(--line-height-xs);
+}
+
+.agent-profile.block .lang-prof-accred .languages,
+.agent-profile.block .lang-prof-accred .professional-accreditations {
+  margin-bottom: 2rem;
+  font-size: var(--body-font-size-s);
+  line-height: var(--line-height-xs);
+}
+
+
+.agent-profile.block .about::before {
+  content: 'About';
+  font-weight: var(--font-weight-bold);
+}
+
+.agent-profile.block .lang-prof-accred .languages::before {
+  content: 'Languages';
+  font-weight: var(--font-weight-bold);
+}
+
+.agent-profile.block .lang-prof-accred .professional-accreditations::before {
+  content: 'Professional Accreditations';
+  font-weight: var(--font-weight-bold);
+}
+
+.agent-profile.block .about>div {
+  margin-top: 0.75rem;
+}
+
+.agent-profile.block a.view-more::after,
+.agent-profile.block a.view-less::after {
+  display: inline-block;
+  margin-top: 0.5rem;
+  text-decoration: underline;
+  font-size: var(--body-font-size-s);
+  color: var(--black);
+}
+
+.agent-profile.block a.view-more::after {
+  content: "View More";
+}
+
+.agent-profile.block a.view-less::after {
+  content: "View Less";
 }
 
 @media (min-width: 600px) {
+  .agent-profile.block .about {
+    margin-top: 0;
+  }
+
   .agent-profile.block .profile-content .contact-me {
     display: block;
+    margin: 1.5rem 0;
+  }
+
+  .agent-profile.block .address {
+    display: none;
   }
 }
 
@@ -92,41 +203,26 @@ main .section.agent-profile-container .agent-profile-wrapper {
     position: relative;
   }
 
-  main .section.agent-profile-container .agent-profile-wrapper {
+  .agent-profile.block .profile-details {
     position: absolute;
     display: flex;
     left: auto;
     width: 34rem;
     right: 0;
-    bottom: 4.625rem;
+    top: -29rem;
     padding: 1.875rem 1.875rem 0;
     z-index: 1;
     background-color: var(--white);
   }
 
   .agent-profile.block {
-    position: relative;
+    display: flex;
     line-height: var(--line-height-s);
   }
 
   .agent-profile.block .profile-image img {
     width: 13.125rem;
-    height: 15.625rem;
-  }
-
-  .agent-profile.block .profile-content .phone {
-    font-size: var(--body-font-size-s);
-    margin-top: 2px;
-    line-height: var(--line-height-m);
-  }
-
-  .agent-profile.block .profile-content .email a,
-  .agent-profile.block .profile-content .website a {
-    font-size: var(--body-font-size-xs);
-  }
-
-  .agent-profile.block .profile-content {
-    padding-left: 1.875rem;
+    height: 22rem;
   }
 
   .agent-profile.block .profile-content .designation,
@@ -137,4 +233,14 @@ main .section.agent-profile-container .agent-profile-wrapper {
   .agent-profile.block .profile-content .phone li {
     margin-bottom: unset;
   }
+
+  .agent-profile.block .lang-prof-accred {
+    gap: 3rem;
+    display: flex;
+    flex-basis: 40%;
+  }
+
+  .agent-profile.block .about {
+    flex-basis: 60%;
+  }
 }
diff --git a/blocks/agent-profile/agent-profile.js b/blocks/agent-profile/agent-profile.js
index 191b685f..d01ee2b4 100644
--- a/blocks/agent-profile/agent-profile.js
+++ b/blocks/agent-profile/agent-profile.js
@@ -1,6 +1,6 @@
 import { decorateIcons, getMetadata } from '../../scripts/aem.js';
 import {
-  a, div, h1, ul, li, img, span,
+  a, div, h1, ul, li, img, span, p,
 } from '../../scripts/dom-helpers.js';
 
 const getPhoneDiv = () => {
@@ -79,7 +79,26 @@ const getSocialDiv = () => {
   return null;
 };
 
-export default async function decorate(block) {
+const decorateAddress = (block) => {
+  const streetAddress = getMetadata('street-address');
+  const city = getMetadata('city');
+  const state = getMetadata('state');
+  const zip = getMetadata('zip');
+  const text = `${streetAddress}, ${city}, ${state} ${zip}`;
+
+  const addressDiv = div({ class: 'address' },
+    p('Berkshire Hathaway HomeServices'),
+    p('Commonwealth Real Estate'),
+    p(streetAddress),
+    p(`${city}, ${state} ${zip}`),
+    a({ href: `https://maps.google.com/maps?q=${text}`, target: '_blank' }, 'Directions'),
+  );
+
+  block.append(addressDiv);
+};
+
+const decorateProfileDetails = (block) => {
+  const profileDetails = div({ class: 'profile-details' });
   const profileImage = getImageDiv();
   const profileContent = div({ class: 'profile-content' },
     div({ class: 'name' }, h1(getMetadata('name'))),
@@ -114,6 +133,73 @@ export default async function decorate(block) {
   if (socialDiv) {
     profileContent.append(socialDiv);
   }
+
   decorateIcons(profileContent);
-  block.replaceChildren(profileImage, profileContent);
+  profileDetails.append(profileImage, profileContent);
+  block.replaceChildren(profileDetails);
+};
+
+const viewMoreOnClick = (name, anchor, block) => {
+  anchor.addEventListener('click', (event) => {
+    event.preventDefault();
+    if (anchor.classList.contains('view-more')) {
+      anchor.classList.remove('view-more');
+      anchor.classList.add('view-less');
+      block.querySelector(`.${name}-non-truncate`).classList.remove('hide');
+      block.querySelector(`.${name}-truncate`).classList.add('hide');
+    } else {
+      anchor.classList.remove('view-less');
+      anchor.classList.add('view-more');
+      block.querySelector(`.${name}-non-truncate`).classList.add('hide');
+      block.querySelector(`.${name}-truncate`).classList.remove('hide');
+    }
+  });
+};
+
+const decorateAbout = (block) => {
+  const text = 'about';
+  const aboutText = getMetadata(text);
+  const aboutDiv = div({ class: text });
+  const threshold = 245;
+  aboutDiv.append(div({ class: `${text}-truncate` }, aboutText.substring(0, threshold)));
+  aboutDiv.append(div({ class: `${text}-non-truncate hide` }, aboutText));
+  aboutDiv.append(a({ href: '#', class: 'view-more' }));
+  viewMoreOnClick(text, aboutDiv.querySelector('a'), block);
+  block.append(aboutDiv);
+};
+
+const createLangoOrProfAccred = (key, langProfAccredDiv) => {
+  const threshold = 3;
+  const truncateDiv = ul({ class: `${key}-truncate` });
+  const nontruncateDiv = ul({ class: `${key}-non-truncate hide` });
+
+  getMetadata(key).split(',').filter((x) => x).forEach((x, index) => {
+    if (index < threshold) {
+      truncateDiv.append(li(x.trim()));
+    }
+    nontruncateDiv.append(li(x.trim()));
+  });
+
+  const anchor = a({ href: '#', class: 'view-more' });
+  langProfAccredDiv.append(div({ class: key },
+    truncateDiv,
+    nontruncateDiv,
+    anchor,
+  ));
+
+  viewMoreOnClick(key, anchor, langProfAccredDiv);
+};
+
+const decorateLangProfAccred = (block) => {
+  const langProfAccredDiv = div({ class: 'lang-prof-accred' });
+  createLangoOrProfAccred('languages', langProfAccredDiv);
+  createLangoOrProfAccred('professional-accreditations', langProfAccredDiv);
+  block.append(langProfAccredDiv);
+};
+
+export default async function decorate(block) {
+  decorateProfileDetails(block);
+  decorateAbout(block);
+  decorateLangProfAccred(block);
+  decorateAddress(block);
 }
diff --git a/blocks/agent-profile/design-1.css b/blocks/agent-profile/design-1.css
new file mode 100644
index 00000000..98069465
--- /dev/null
+++ b/blocks/agent-profile/design-1.css
@@ -0,0 +1,190 @@
+.design-1 .agent-profile.block {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.design-1 .agent-profile.block .profile-details {
+  position: relative;
+  top: unset;
+  flex-direction: column;
+  display: flex;
+  margin-top: 2rem;
+}
+
+.design-1 .agent-profile.block .profile-content {
+  font-size: var(--body-font-size-l);
+  font-weight: var(--font-weight-bold);
+  padding-left: 0;
+}
+
+.design-1 .agent-profile.block .profile-content div {
+  margin-bottom: 0.5rem;
+}
+
+.design-1 .agent-profile.block .profile-content .name h1 {
+  font-family: var(--font-family-secondary);
+  font-size: var(--body-font-size-xxxl);
+  margin-bottom: 2rem;
+  margin-top: 1rem;
+}
+
+.design-1.traditional .agent-profile.block .profile-content .name h1 {
+  color: var(--primary-color);
+}
+
+.design-1 .agent-profile.block .about {
+  margin-bottom: 0;
+  letter-spacing: var(--letter-spacing-xs);
+}
+
+.design-1 .agent-profile.block .lang-prof-accred {
+  letter-spacing: var(--letter-spacing-xs);
+}
+
+.design-1 .agent-profile.block .profile-image img {
+  width: 100%;
+  aspect-ratio: 1/1;
+  max-width: calc((100% - 60px * 2));
+  margin: 0 auto;
+  object-fit: cover;
+  height: fit-content;
+}
+
+.design-1.traditional .agent-profile.block .profile-image img {
+  box-shadow: var(--primary-color) 3rem -3rem;
+}
+
+.design-1 .agent-profile.block .profile-content .contact-me {
+  display: none;
+  font-size: var(--body-font-size-s);
+}
+
+.design-1 .agent-profile.block .profile-image {
+  display: flex;
+}
+
+.design-1.traditional .agent-profile.block .address {
+  background-color: var(--primary-color);
+}
+
+.design-1.traditional .agent-profile.block .address p {
+  color: var(--white);
+}
+
+.design-1.black-white .agent-profile.block .address a {
+  color: var(--white);
+  border: 1px solid var(--white);
+}
+
+.design-1.traditional .agent-profile.block .address a {
+  color: var(--white);
+  border: 1px solid var(--white);
+}
+
+.design-1.black-white .agent-profile.block .address a:hover {
+  background-color: var(--white);
+  color: var(--black);
+}
+
+.design-1.traditional .agent-profile.block .address a:hover {
+  color: var(--primary-color);
+  background-color: var(--primary-light);
+}
+
+.design-1.black-white .agent-profile.block .profile-image img {
+  box-shadow: var(--black) 4.375rem -4.375rem;
+}
+
+.design-1.black-white .agent-profile.block .profile-content .name {
+  color: var(--black);
+}
+
+.design-1.black-white .agent-profile.block .profile-content .name h1 {
+  color: var(--black);
+}
+
+.design-1.black-white .agent-profile.block .profile-content .contact-me a {
+  color: var(--black);
+  border: 1px solid var(--black);
+}
+
+.design-1.black-white .agent-profile.block .profile-content .contact-me a:hover {
+  background-color: var(--black);
+  color: var(--white);
+}
+
+.design-1.black-white .agent-profile.block .address {
+  background-color: var(--black);
+}
+
+.design-1.black-white .agent-profile.block .address p {
+  color: var(--white);
+}
+
+@media (min-width: 900px) {
+  .design-1 .agent-profile.block {
+    position: relative;
+  }
+
+  .design-1 .agent-profile.block .profile-details {
+    flex-direction: row-reverse;
+  }
+
+  .design-1 .agent-profile.block .profile-content .name h1 {
+    font-size: 2.75rem;
+    margin-top: 0;
+  }
+
+  .design-1 .agent-profile.block .profile-image {
+    flex-basis: 60%;
+  }
+
+  .design-1 .agent-profile.block .profile-content {
+    flex-basis: 40%;
+    margin-top: 0;
+  }
+
+  .design-1 .agent-profile.block .profile-image img {
+    margin-top: 70px;
+    position: absolute;
+    width: 50%;
+    margin-left: calc(0.025 * 100vw);
+  }
+
+  .design-1.traditional .agent-profile.block .profile-image img {
+    box-shadow: var(--primary-color) 4.375rem -4.375rem;
+  }
+
+  .design-1 .agent-profile.block .profile-content .contact-me {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    display: block;
+  }
+
+  .design-1 .agent-profile.block .about {
+    flex-basis: 0;
+    width: 40%;
+  }
+
+  .design-1 .agent-profile.block .lang-prof-accred {
+    display: flex;
+    gap: 2rem;
+  }
+
+  .design-1 .agent-profile.block .profile-content div {
+    font-size: var(--body-font-size-s);
+  }
+
+  .design-1 .agent-profile.block .profile-content .email a,
+  .design-1 .agent-profile.block .profile-content .website a {
+    font-size: var(--body-font-size-s);
+  }
+}
+
+@media (min-width: 1200px) {
+  .design-1 .agent-profile.block .profile-details {
+    padding: 0;
+    width: unset;
+  }
+}
diff --git a/blocks/agent-transactions/agent-transactions.css b/blocks/agent-transactions/agent-transactions.css
index c7e43f8c..3519d79c 100644
--- a/blocks/agent-transactions/agent-transactions.css
+++ b/blocks/agent-transactions/agent-transactions.css
@@ -116,7 +116,7 @@
   }
 }
 
-@media (min-width: 992px) {
+@media (min-width: 900px) {
   .agent-transactions.block h1 {
     font-size: 1.875rem;
   }