merge main resolve conflicts

blocks/columns/columns.css

@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 .columns > div {
   display: flex;
   flex-direction: column;
@@ -12,13 +13,15 @@
   order: 1;
 }
 
-.columns > div > div:not(.columns-img-col) {
+.columns > div > div:not(.columns-img-col, .columns.locations > div > div) {
   max-width: 750px;
   margin-left: auto;
   margin-right: auto;
 }
 
-.columns > div > .columns-img-col:not(.columns.image-no-order > div > .columns-img-col) {
+.columns
+  > div
+  > .columns-img-col:not(.columns.image-no-order > div > .columns-img-col) {
   order: 0;
 }
 
@@ -37,13 +40,107 @@
 }
 
 .columns.download em {
-  color: var(--link-color)
+  color: var(--link-color);
 }
 
 .download .secondary:any-link {
   padding: 0;
 }
 
+/* styles for column gallery variant */
+.columns.gallery {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.columns.gallery > div {
+  flex-direction: row;
+}
+
+.columns.gallery .columns-img-col {
+  position: relative;
+  width: calc((100% - 90px) / 4);
+}
+
+.columns.gallery .columns-img-col::after {
+  content: "";
+  transition: 0.3s ease-out;
+  transition-property: opacity;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  top: 0;
+  position: absolute;
+  left: 0;
+  background: rgb(34 34 34 / 80%);
+}
+
+.columns.gallery .columns-img-col:hover::after,
+.columns.gallery .columns-img-col:hover:active {
+  opacity: 1;
+}
+
+.columns.gallery img {
+  aspect-ratio: 1 / 1;
+}
+
+/* styles for columns location variant */
+.columns.locations {
+  display: flex;
+  flex-direction: column;
+}
+
+.columns.locations,
+.columns.locations > div {
+  gap: 60px;
+}
+
+.columns.locations > div > div {
+  gap: 60px;
+  margin: 0;
+  position: relative;
+  text-wrap: wrap;
+  overflow-wrap: anywhere;
+}
+
+.columns.locations > div > div::after {
+  content: "";
+  position: absolute;
+  border-top: 1px solid #e5e5e5;
+  left: 0;
+  width: 100%;
+  bottom: -30px;
+}
+
+.columns.locations > div:last-of-type > div:last-of-type {
+  padding-bottom: 30px;
+}
+
+.columns.locations > div:last-of-type > div:last-of-type::after {
+  border: unset;
+}
+
+/* styles for produsts variant */
+.columns.products .icon {
+  max-width: 400px;
+  aspect-ratio: 106 / 75;
+  width: auto;
+  height: auto;
+  display: block;
+  margin: auto;
+}
+
+.columns.products p > picture img {
+  aspect-ratio: 10 / 7;
+}
+
+/* ratio variants */
+.columns.ratio > div > div {
+  margin: unset;
+}
+
 @media (width >= 640px) {
   /* styles for column grid variant */
   .columns.grid > div {
@@ -84,8 +181,40 @@
     padding-top: 0;
   }
 
-  .columns.grid > div .col-wide, 
+  .columns.grid > div .col-wide,
   .columns.grid > div .col-narrow {
     flex-basis: 0;
   }
+
+  /* styles for column gallery variant */
+  .columns.gallery {
+    gap: 40px;
+  }
+
+  .columns.locations {
+    padding-bottom: 40px;
+  }
+
+  .columns.locations > div {
+    align-items: stretch;
+  }
+
+  .columns.locations > div > div::after {
+    border-top: unset;
+    border-right: 1px solid #e5e5e5;
+    height: 100%;
+    right: -20px;
+    top: 0;
+    width: 1px;
+    left: unset;
+  }
+
+  .columns.locations > div > div:last-of-type::after {
+    display: none;
+  }
+
+  /* ratio variants */
+  .columns.ratio > div {
+    display: grid;
+  }
 }

blocks/columns/columns.js

@@ -1,3 +1,5 @@
+import { createOptimizedPicture } from '../../scripts/aem.js';
+
 const borderClassName = 'border-top';
 
 export default function decorate(block) {
@@ -13,9 +15,25 @@ export default function decorate(block) {
   const isDownloadVariant = block.classList.contains('download');
 
   const isGridVariant = block.classList.contains('grid');
+  const isGalleryVariant = block.classList.contains('gallery');
+  const ratioClass = [...block.classList].find((cl) => cl.startsWith('ratio-'));
+  let rationNumbers;
+
+  if (ratioClass) {
+    const regex = /(\d+)/g;
+
+    rationNumbers = [...ratioClass.matchAll(regex).map((match) => parseInt(match[1], 10))];
+    block.classList.add('ratio');
+  }
+
   // setup image columns
   [...block.children].forEach((row) => {
     const rows = [...row.children];
+
+    if (rationNumbers) {
+      row.style.gridTemplateColumns = rationNumbers.map((v) => `${v}fr`).join(' ');
+    }
+
     rows.forEach((col, index) => {
       const pic = col.querySelector('picture');
       if (pic) {
@@ -47,6 +65,22 @@ export default function decorate(block) {
           col.classList.add('col-narrow');
         }
       }
+
+      // handel gallery variant
+      if (isGalleryVariant) {
+        const imageSrc = pic.querySelector('img').src;
+        const breakpoints = [
+          { media: '(min-width: 1800px)', width: '620' },
+          { media: '(min-width: 1500px)', width: '460' },
+          { media: '(min-width: 1200px)', width: '345' },
+          { media: '(min-width: 960px)', width: '238' },
+          { media: '(min-width: 640px)', width: '218' },
+          { width: '138' },
+        ];
+        const newPic = createOptimizedPicture(imageSrc, '', false, breakpoints);
+
+        pic.replaceWith(newPic);
+      }
     });
   });
 }

blocks/footer/footer.css

@@ -119,7 +119,7 @@ footer {
 
 @media (width >= 768px) {
   .footer .section {
-    padding: 10px 30px 40px;
+    padding: 40px 30px;
   }
 
   .footer .columns > div {

blocks/text/text.css

@@ -2,10 +2,12 @@
   max-width: 750px;
 }
 
+/* centering by variant */
 .text.center > div {
   margin: auto;
 }
 
+/* centering by set the text aling in the document */
 .section-center .text {
   text-align: center;
-}
+}

styles/styles.css

@@ -128,14 +128,14 @@ blockquote {
   margin-bottom: 1em;
 }
 
-ul {
-  padding-left: 30px;
-}
-
 address, dl, fieldset, figure, ol, p, pre, ul {
   margin: 0 0 20px;
 }
 
+ul {
+  padding: 0 30px;
+}
+
 code {
   padding: 0.125em;
 }
@@ -256,7 +256,7 @@ main .section:first-child {
 }
 
 main .section:last-child,
-main .section.padding-bottom-0  {
+main .section.padding-bottom-0 {
   padding-bottom: 0;
 }