Image content grid block

blocks/image-content-grid/image-content-grid.css

@@ -0,0 +1,193 @@
+main .image-content-grid-container {
+    width: 100%;
+  }
+
+  main .image-content-grid-container .main-image-content-grid-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper > p {
+    font-size: var(--font-size-11);
+    font-family: var(--sans-serif-font-medium);
+    line-height: var(--line-height-120); /* 16.8px */
+    letter-spacing: var(--letter-spacing-02-em);
+    text-transform: uppercase;
+    margin: 0;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper > h2 {
+    margin: unset;
+    margin-top: var(--spacer-element-08);
+    width: 85%;
+  }
+
+  .image-content-grid-container .default-content-wrapper {
+    display: none;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div p {
+    font-size: var(--font-size-16);
+    letter-spacing: var(--letter-spacing-001-em);
+    margin: var(--spacer-element-07) 0;
+    line-height: var(--line-height-160);
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div p span svg {
+    height: var(--spacer-layout-03);
+    width: auto;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div p:first-child {
+    margin: unset;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div {
+    width: 100%;
+    margin: 0 auto;
+    padding-top: var(--spacer-element-08);
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div h3 {
+    font-family: var(--sans-serif-font-medium);
+    font-size: var(--font-size-18);
+    line-height: var(--line-height-160);
+    letter-spacing: var(--letter-spacing-1);
+    margin: 0;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div .button-container {
+    margin: 0;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div a {
+    display: inline-block;
+    text-decoration: none;
+    font-family: var(--sans-serif-font-medium);
+    font-size: var(--font-size-16);
+    letter-spacing: var(--letter-spacing-1);
+    height: var(--spacer-element-06);
+    border-bottom: var(--spacer-element-01) solid var(--primary-purple);
+    color: var(--primary-purple);
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div a:hover {
+    background: var(--gradient-left-right);
+    background-clip: text;
+    -webkit-background-clip: text; /* stylelint-disable-line */
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+    border-image-slice: 1;
+    border-image-source: var(--gradient-left-right);
+  }
+
+  @media only screen and (min-width: 768px) {
+    main .image-content-grid-container .main-image-content-grid-wrapper {
+      display: flex;
+      flex-flow: row nowrap;
+      padding: var(--spacer-layout-06) 0;
+      align-items: flex-start;
+      gap: var(--gap-24);
+      flex-shrink: 0;
+      margin: 0 auto;
+      width: calc(100% - 72px);
+    }
+
+    .section.image-content-grid-container .image-content-grid-wrapper  {
+      width: 60%;
+      padding-bottom: 0;
+    }
+
+    .image-content-grid-container .default-content-wrapper {
+      width: 40%;
+      display: block;
+    }
+
+    .image-content-grid-container .image-content-grid-wrapper > h2 {
+      margin: unset;
+      margin-top: var(--spacer-element-07);
+      margin-bottom: var(--spacer-element-08);
+      width: 100%;
+    }
+
+    .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:first-child {
+      padding-top: 0;
+    }
+
+    .main-image-content-grid-wrapper .default-content-wrapper > p > picture > img {
+      width: 163px;
+    }
+  }
+
+  @media only screen and (min-width: 1200px) {
+    main .image-content-grid-container .main-image-content-grid-wrapper {
+      width: var(--section-width-desktop);
+      padding: var(--spacer-layout-07) 0;
+      gap: var(--gap-120);
+    }
+
+    .image-content-grid-container .default-content-wrapper {
+      width: var(--sidebar-max-container);
+    }
+
+    .image-content-grid-container .image-content-grid-wrapper > p {
+      font-size: var(--font-size-14);
+      letter-spacing: var(--letter-spacing-02-em);
+    }
+
+    .image-content-grid-container .image-content-grid-wrapper > h2 {
+      margin: unset;
+      margin-top: var(--spacer-element-08);
+      margin-bottom: var(--spacer-element-05);
+    }
+
+    .image-content-grid-container .image-content-grid-wrapper .image-content-grid {
+      position: relative;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: auto auto auto;
+    }
+
+    .image-content-grid-container .image-content-grid-wrapper .image-content-grid div, .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:first-child {
+      padding-top: var(--spacer-layout-04);
+    }
+
+    .main-image-content-grid-wrapper .default-content-wrapper > p > picture > img {
+      width: 270px;
+    }
+
+    .image-content-grid-container .image-content-grid-wrapper .image-content-grid div h3 {
+      font-size: var(--font-size-21);
+    }
+
+    .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(odd) > *, .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(odd) > p {
+      margin-right: 60px;
+    }
+
+    .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(even) > *, .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(even) > p {
+      margin-left: 60px;
+    }
+
+    /* no bottom padding for last row of cards */
+    .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-last-child(2), .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:last-child {
+      padding-bottom: 0;
+    }
+
+    /* no border on last row of cards */
+    .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(2n + 1):nth-last-child(-n + 2),
+    .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(2n + 1):nth-child(2n + 1):nth-last-child(-n + 2) ~ .image-content-grid-container .image-content-grid-wrapper .image-content-grid div {
+      border-bottom: none;
+    }
+  }

blocks/image-content-grid/image-content-grid.js

@@ -0,0 +1,40 @@
+export default async function decorate(block) {
+  // Remove first level of nesting
+  const childDivs = block.querySelectorAll('.image-content-grid > div');
+
+  childDivs.forEach((childDiv) => {
+    while (childDiv.firstChild) {
+      block.appendChild(childDiv.firstChild);
+    }
+    childDiv.remove();
+  });
+
+  // Select the image-content-grid-container element
+  const imageContentGridContainer = document.querySelector('.image-content-grid-container');
+
+  // Create a new div element
+  const newWrapper = document.createElement('div');
+  newWrapper.classList.add('main-image-content-grid-wrapper');
+
+  // Iterate through the existing children and move them into the new div
+  while (imageContentGridContainer.firstChild) {
+    newWrapper.appendChild(imageContentGridContainer.firstChild);
+  }
+
+  // Append the new div back to the solution-list-container
+  imageContentGridContainer.appendChild(newWrapper);
+
+  // Get the parent element with class "default-content-wrapper"
+  const defaultContentWrapper = document.querySelector('.default-content-wrapper');
+
+  // Get the first p element among all p elements inside the default content wrapper
+  const firstPTag = defaultContentWrapper.querySelector('p');
+
+  // Get the h2 tag from default content wrapper
+  const heading = defaultContentWrapper.querySelector('h2');
+
+  // Select the image-content-grid-wrapper element
+  const imageContentGridWrapper = document.querySelector('.image-content-grid-wrapper');
+  imageContentGridWrapper.insertBefore(heading, imageContentGridWrapper.firstChild);
+  imageContentGridWrapper.insertBefore(firstPTag, imageContentGridWrapper.firstChild);
+}