From b146c35a1dedbed50cff82914f5c5b10477a3d5e Mon Sep 17 00:00:00 2001
From: JiangLong2019 <57093988+JiangLong2019@users.noreply.github.com>
Date: Wed, 20 Sep 2023 15:40:40 +0900
Subject: [PATCH 1/5] Brand detail page styling ver1

---
 styles/styles.css | 83 +++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 80 insertions(+), 3 deletions(-)

diff --git a/styles/styles.css b/styles/styles.css
index 0c18a159..803c15e4 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -425,6 +425,57 @@ main .section.full-width>.section-container {
   padding-right: 0;
 }
 
+/* START section - brand detail page */
+main .brand-detail-page {
+  margin-bottom: 5rem;
+}
+
+main .brand-detail-page .toc-wrapper.flat {
+  margin-bottom: 0;
+}
+
+main .brand-detail-page img {
+  padding: 2.5rem 0;
+  width: 58.75rem;
+  max-width: 100%;
+  margin-bottom: 2rem;
+  box-sizing: border-box;
+}
+
+main .brand-detail-page .image-collage img {
+  max-width: 10rem;
+  padding: unset;
+  margin-bottom: 0.5rem;
+  zoom: 1;
+}
+
+main .brand-detail-page p {
+  padding: 0 1rem;
+  max-width: 37.5rem;
+  margin: 0 auto;
+  text-align: left;
+  line-height: 1.5em;
+}
+
+main .brand-detail-page a.button.primary {
+  background: unset;
+  color: var(--link-color);
+  text-decoration: none;
+  margin-top: 2rem;
+  font-size: 1rem;
+  font-weight: var(--font-weight-medium);
+  display: block;
+  text-align: center;
+}
+
+main .brand-detail-page h3 {
+  padding: 0 1rem;
+  margin: 0 auto;
+  line-height: 1.5em;
+}
+
+/* END section - brand detail page */
+
 /* section - brands-top */
 main .section.brands-top {
   padding-top: 3rem;
@@ -712,9 +763,6 @@ main .section.light-blue {
     display: block;
   }
 
-
-
-
   /* START Section Styles START */
 
   main .section .section-container {
@@ -724,6 +772,35 @@ main .section.light-blue {
     padding-right: 16px
   }
 
+/* START section - brand detail page */
+main .brand-detail-page img {
+  padding: 2.5rem 0;
+  width: 58.75rem;
+  max-width: 100%;
+  box-sizing: border-box;
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+main .brand-detail-page .image-collage img {
+  width: unset;
+  max-width: unset;
+  padding: unset;
+  margin-bottom: 0.5rem;
+  zoom: 0.5;
+}
+
+main .brand-detail-page .image-collage.boxy-col-1::after {
+  content: unset;
+  flex: unset;
+}
+
+main .brand-detail-page p:has(img) {
+  max-width: unset;
+}
+
+/* END section - brand detail page */
+
   /* section - brands-top */
   main .section.brands-top h6 {
     font-size: var(--font-size-small);

From 4576645853da4a5c8fda6c33b031d86e937280c2 Mon Sep 17 00:00:00 2001
From: JiangLong2019 <57093988+JiangLong2019@users.noreply.github.com>
Date: Wed, 4 Oct 2023 16:31:31 +0900
Subject: [PATCH 2/5] Bug fix

---
 styles/styles.css | 44 +++++++++++++++++++++-----------------------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/styles/styles.css b/styles/styles.css
index c4bb86fb..51cbe31a 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -452,14 +452,6 @@ main .brand-detail-page .toc-wrapper.flat {
   margin-bottom: 0;
 }
 
-main .brand-detail-page img {
-  padding: 2.5rem 0;
-  width: 58.75rem;
-  max-width: 100%;
-  margin-bottom: 2rem;
-  box-sizing: border-box;
-}
-
 main .brand-detail-page .image-collage img {
   max-width: 10rem;
   padding: unset;
@@ -467,6 +459,14 @@ main .brand-detail-page .image-collage img {
   zoom: 1;
 }
 
+main .brand-detail-page .wide img {
+  padding: 2.5rem 1rem;
+  width: 58.75rem;
+  max-width: 100%;
+  margin-bottom: 2rem;
+  box-sizing: border-box;
+}
+
 main .brand-detail-page p {
   padding: 0 1rem;
   max-width: 37.5rem;
@@ -486,12 +486,6 @@ main .brand-detail-page a.button.primary {
   text-align: center;
 }
 
-main .brand-detail-page h3 {
-  padding: 0 1rem;
-  margin: 0 auto;
-  line-height: 1.5em;
-}
-
 /* END section - brand detail page */
 
 /* section - brands-top */
@@ -829,15 +823,6 @@ main .section.light-blue {
   }
 
 /* START section - brand detail page */
-main .brand-detail-page img {
-  padding: 2.5rem 0;
-  width: 58.75rem;
-  max-width: 100%;
-  box-sizing: border-box;
-  display: block;
-  margin: 0 auto 2rem;
-}
-
 main .brand-detail-page .image-collage img {
   width: unset;
   max-width: unset;
@@ -846,6 +831,19 @@ main .brand-detail-page .image-collage img {
   zoom: 0.5;
 }
 
+main .brand-detail-page .wide img {
+  padding: 2.5rem 1rem;
+  width: unset;
+  max-width: 100%;
+  box-sizing: border-box;
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+main .brand-detail-page .image-collage.wide.boxy-col-1>div {
+  flex: unset;
+}
+
 main .brand-detail-page .image-collage.boxy-col-1::after {
   content: unset;
   flex: unset;

From 08b6452e21be4897939595d8143e83a2470ee1ea Mon Sep 17 00:00:00 2001
From: JiangLong2019 <57093988+JiangLong2019@users.noreply.github.com>
Date: Thu, 5 Oct 2023 12:47:46 +0900
Subject: [PATCH 3/5] Refactoring

---
 blocks/image-collage/image-collage.css | 32 +++++++++++
 blocks/link-dropdown/link-dropdown.css |  1 -
 blocks/text/text.css                   |  3 +-
 styles/styles.css                      | 78 --------------------------
 4 files changed, 34 insertions(+), 80 deletions(-)

diff --git a/blocks/image-collage/image-collage.css b/blocks/image-collage/image-collage.css
index 46f11d57..f6c6d96a 100644
--- a/blocks/image-collage/image-collage.css
+++ b/blocks/image-collage/image-collage.css
@@ -32,6 +32,22 @@ main .image-collage img {
   width: calc(100vw - 2rem);
 }
 
+main .image-collage.wide img {
+padding: 2.5rem 1rem;
+}
+
+main .image-collage.zoom-in img {
+  max-width: 10rem;
+  padding: unset;
+  margin-bottom: 0.5rem;
+  transform: scale(1);
+}
+
+main .image-collage.boxy-col-1.zoom-in::after {
+  content: unset;
+  flex: unset;
+}
+
 main .image-collage * {
   font-size: var(--font-size-small);
   color: #6D757C;
@@ -51,6 +67,22 @@ main .image-collage .image-caption {
     padding: unset;
   }
 
+  main .image-collage.zoom-in img {
+    transform: scale(1.5);
+  }
+
+  main .image-collage.wide img {
+    padding: 2.5rem 1rem;
+    width: unset;
+    max-width: 100%;
+    box-sizing: border-box;
+    display: block;
+  }
+
+  main .image-collage.wide.boxy-col-1>div {
+    flex: unset;
+  }
+
   main .image-collage[class*='boxy-col-'] {
     display: flex;
     flex-wrap: wrap;
diff --git a/blocks/link-dropdown/link-dropdown.css b/blocks/link-dropdown/link-dropdown.css
index 79d33bd4..56fb7844 100644
--- a/blocks/link-dropdown/link-dropdown.css
+++ b/blocks/link-dropdown/link-dropdown.css
@@ -1,5 +1,4 @@
 .link-dropdown.block {
-  max-width: 37.5rem;
   margin: 3rem auto 0;
   padding: 0 1rem;
 }
diff --git a/blocks/text/text.css b/blocks/text/text.css
index d036ac98..cc5b8f46 100644
--- a/blocks/text/text.css
+++ b/blocks/text/text.css
@@ -15,7 +15,8 @@ main .block.text.left-aligned h3,
 main .block.text.left-aligned h4,
 main .block.text.left-aligned h5,
 main .block.text.left-aligned h6,
-main .block.text.left-aligned p {
+main .block.text.left-aligned p,
+main .block.text.left-aligned div {
   text-align: left;
   margin-left: 0;
 }
diff --git a/styles/styles.css b/styles/styles.css
index 51cbe31a..0b7f2518 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -443,51 +443,6 @@ main .section.full-width>.section-container {
   padding-right: 0;
 }
 
-/* START section - brand detail page */
-main .brand-detail-page {
-  margin-bottom: 5rem;
-}
-
-main .brand-detail-page .toc-wrapper.flat {
-  margin-bottom: 0;
-}
-
-main .brand-detail-page .image-collage img {
-  max-width: 10rem;
-  padding: unset;
-  margin-bottom: 0.5rem;
-  zoom: 1;
-}
-
-main .brand-detail-page .wide img {
-  padding: 2.5rem 1rem;
-  width: 58.75rem;
-  max-width: 100%;
-  margin-bottom: 2rem;
-  box-sizing: border-box;
-}
-
-main .brand-detail-page p {
-  padding: 0 1rem;
-  max-width: 37.5rem;
-  margin: 0 auto;
-  text-align: left;
-  line-height: 1.5em;
-}
-
-main .brand-detail-page a.button.primary {
-  background: unset;
-  color: var(--link-color);
-  text-decoration: none;
-  margin-top: 2rem;
-  font-size: 1rem;
-  font-weight: var(--font-weight-medium);
-  display: block;
-  text-align: center;
-}
-
-/* END section - brand detail page */
-
 /* section - brands-top */
 main .section.brands-top {
   padding-top: 3rem;
@@ -822,39 +777,6 @@ main .section.light-blue {
     padding-right: 16px
   }
 
-/* START section - brand detail page */
-main .brand-detail-page .image-collage img {
-  width: unset;
-  max-width: unset;
-  padding: unset;
-  margin-bottom: 0.5rem;
-  zoom: 0.5;
-}
-
-main .brand-detail-page .wide img {
-  padding: 2.5rem 1rem;
-  width: unset;
-  max-width: 100%;
-  box-sizing: border-box;
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-main .brand-detail-page .image-collage.wide.boxy-col-1>div {
-  flex: unset;
-}
-
-main .brand-detail-page .image-collage.boxy-col-1::after {
-  content: unset;
-  flex: unset;
-}
-
-main .brand-detail-page p:has(img) {
-  max-width: unset;
-}
-
-/* END section - brand detail page */
-
   /* section - brands-top */
   main .section.brands-top h6 {
     font-size: var(--font-size-small);

From 500c3062935d0c95cac8df870ac534840c935f83 Mon Sep 17 00:00:00 2001
From: JiangLong2019 <57093988+JiangLong2019@users.noreply.github.com>
Date: Thu, 5 Oct 2023 12:50:06 +0900
Subject: [PATCH 4/5] Fix code check

---
 blocks/image-collage/image-collage.css | 32 +++++++++++++-------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/blocks/image-collage/image-collage.css b/blocks/image-collage/image-collage.css
index f6c6d96a..9329c724 100644
--- a/blocks/image-collage/image-collage.css
+++ b/blocks/image-collage/image-collage.css
@@ -67,22 +67,6 @@ main .image-collage .image-caption {
     padding: unset;
   }
 
-  main .image-collage.zoom-in img {
-    transform: scale(1.5);
-  }
-
-  main .image-collage.wide img {
-    padding: 2.5rem 1rem;
-    width: unset;
-    max-width: 100%;
-    box-sizing: border-box;
-    display: block;
-  }
-
-  main .image-collage.wide.boxy-col-1>div {
-    flex: unset;
-  }
-
   main .image-collage[class*='boxy-col-'] {
     display: flex;
     flex-wrap: wrap;
@@ -113,6 +97,22 @@ main .image-collage .image-caption {
     margin-bottom: 2rem;
   }
 
+  main .image-collage.zoom-in img {
+    transform: scale(1.5);
+  }
+
+  main .image-collage.wide img {
+    padding: 2.5rem 1rem;
+    width: unset;
+    max-width: 100%;
+    box-sizing: border-box;
+    display: block;
+  }
+
+  main .image-collage.wide.boxy-col-1>div {
+    flex: unset;
+  }
+
   main .image-collage[class*='boxy-col-']>div>div:first-of-type {
     padding: unset;
   }

From 5285b15534f5cb875a0c20c4189ab5b6ffc9e95d Mon Sep 17 00:00:00 2001
From: JiangLong2019 <57093988+JiangLong2019@users.noreply.github.com>
Date: Thu, 5 Oct 2023 14:58:53 +0900
Subject: [PATCH 5/5] Add visual test

---
 .github/workflows/visual-tests.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/visual-tests.yaml b/.github/workflows/visual-tests.yaml
index 9e4ed9e6..30db5378 100644
--- a/.github/workflows/visual-tests.yaml
+++ b/.github/workflows/visual-tests.yaml
@@ -5,7 +5,7 @@ on:
     types: [ opened, synchronize ]
 
 env:
-  TEST_PATHS: "/ /career/yuya-yoshisue"
+  TEST_PATHS: "/ /career/yuya-yoshisue /brands/consumer-health-beauty"
   TEST_PATHS_INDEXES: "/sidekick/library.json "
   DOMAIN_MAIN: "main--sunstar--hlxsites.hlx.page"
   DOMAIN_BRANCH: "${{github.head_ref}}--sunstar--hlxsites.hlx.page"