I’m working on a custom section for a Shopify website where I have a specific layout requirement. However, I’m facing issues with the positioning and alignment of elements within the section. Below is the code of my section:

<style>
  .custom-section {
    height: 650px;
    background: linear-gradient(180deg, #D6F1FA 0%, #C5EAF7 100%);
    position: relative;
  }
  
  .custom-section .container-wrapper {
    position: relative;
    width: 1510px;
    height: 430px;
    top: 100px;
    left: 75px;
  }

  .custom-section .text-section {
    width: 520px;
    height: 190px;
    position: absolute;
    left: 20px;
    display: flex;
    flex-direction: column;
  }
  

  .custom-section .title-container h2 {
    font-family: 'ITC Garamond Std';
    font-size: 64px;
    font-weight: 300;
    line-height: 70px;
    letter-spacing: -2px;
    text-align: left;
    margin: 0;
    padding: 0;
  }

  .custom-section .text-container {
    font-family: 'iCiel Internacional', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: left;
    width: 60%;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .custom-section .images-wrapper {
    width: 960px;
    height: 430px;
    position: absolute;
    left: 625px;
    display: flex;
    gap: 30px;
  }

  .custom-section .images-wrapper img {
    width: 300px;
    height: 430px;
  }

  .circular span {
    font: 26px Monaco, MonoSpace;
    height: 200px;
    position: absolute;
    width: 20px;
    left: 200px;
    top: 0;
    transform-origin: bottom center;
  }

  .circular {
    width: 160px;
    height: 160px;
  }

  .char1 { transform: rotate(12deg); }
  .char2 { transform: rotate(24deg); }
  .char3 { transform: rotate(36deg); }
  .char4 { transform: rotate(48deg); }
  .char5 { transform: rotate(60deg); }
  .char6 { transform: rotate(72deg); }
  .char7 { transform: rotate(84deg); }
  .char8 { transform: rotate(96deg); }
  .char9 { transform: rotate(108deg); }
  .char10 { transform: rotate(120deg); }
  .char11 { transform: rotate(132deg); }
  .char12 { transform: rotate(144deg); }

  .char13 { transform: rotate(156deg); }
  .char14 { transform: rotate(168deg); }
  .char15 { transform: rotate(180deg); }
  .char16 { transform: rotate(192deg); }
  .char17 { transform: rotate(204deg); }
  .char18 { transform: rotate(216deg); }
  .char19 { transform: rotate(228deg); }
  .char20 { transform: rotate(240deg); }
  .char21 { transform: rotate(252deg); }
  .char22 { transform: rotate(264deg); }
  .char23 { transform: rotate(276deg); }
  .char24 { transform: rotate(288deg); }

  .char25 { transform: rotate(300deg); }
  .char26 { transform: rotate(312deg); }
  .char27 { transform: rotate(324deg); }
  .char28 { transform: rotate(336deg); }
  .char29 { transform: rotate(348deg); }
  .char30 { transform: rotate(360deg); }
  .char31 { transform: rotate(372deg); }
  .char32 { transform: rotate(384deg); }
  .char33 { transform: rotate(396deg); }
  .char34 { transform: rotate(408deg); }
  .char35 { transform: rotate(420deg); }
  .char36 { transform: rotate(432deg); }

  .char37 { transform: rotate(444deg); }
  .char38 { transform: rotate(456deg); }
  .char39 { transform: rotate(468deg); }
</style>

<script src="{{ 'custom-section.js' | asset_url }}" defer="defer"></script>


<section class="custom-section">
  <div class="container-wrapper">
    <div class="text-section">
      <div class="title-container">
        <h2>Our jewelry</h2>
      </div>
      <div class="text-container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor tincidunt posuere. Nam tempus, leo ac tempus hendrerit.</p>
      </div>


  
    </div>

    
    <div class="images-wrapper">
      <img src="{{ 'image1.jpg' | asset_url }}" alt="Image 1">
      <img src="{{ 'image2.jpg' | asset_url }}" alt="Image 2">
      <img src="{{ 'image3.jpg' | asset_url }}" alt="Image 3">
    </div>
  </div>

  <h1 class="circular">
    <span class="char1">W</span>
    <span class="char2">e</span>
    <span class="char3">'</span>
    <span class="char4">r</span>
    <span class="char5">e</span>
    
    <span class="char6">t</span>
    <span class="char7">h</span>
    <span class="char8">e</span>
    
    <span class="char9">b</span>
    <span class="char10">e</span>
    <span class="char11">s</span>
    <span class="char12">t</span>
    <span class="char13">i</span>
    <span class="char14">e</span>
    
    <span class="char15">t</span>
    <span class="char16">h</span>
    <span class="char17">a</span>
    <span class="char18">t</span>
    
    <span class="char19">y</span>
    <span class="char20">o</span>
    <span class="char21">u</span>
    
    <span class="char22">c</span>
    <span class="char23">a</span>
    <span class="char24">n</span>

    <span class="char25">b</span>
    <span class="char26">e</span>

    <span class="char27">y</span>
    <span class="char28">o</span>
    <span class="char29">u</span>
    <span class="char30">r</span>
    <span class="char31">s</span>
    <span class="char32">e</span>
    <span class="char33">l</span>
    <span class="char34">f</span>

    <span class="char35">w</span>
    <span class="char36">i</span>
    <span class="char37">t</span>
    <span class="char38">h</span>
    <span class="char39">.</span>
  </h1>

</section>

{% schema %}
{
  "name": "Custom section",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Text"
    }
  ],
  "presets": [
    {
      "name": "Default custom section"
    }
  ],
  "tag": "section",
  "class": "custom-section",
  "limit": 1
}
{% endschema %}

And this is the “custom-section.js”:

document.addEventListener('DOMContentLoaded', () => {
  const text = document.querySelector('.circular');

  const message = "hello beautiful world";

  text.innerHTML = '';

  for (let i = 0; i < message.length; i++) {
    let circularTextSpan = document.createElement('span');
    circularTextSpan.textContent = message[i];
    text.appendChild(circularTextSpan);
    circularTextSpan.style.transform = `rotate(${360 * i / message.length}deg)`;
  }
});

Current Issue:

The layout is not aligning as expected based on my design mockup. Specifically, I’m having trouble with:

• Positioning of the .text-section and .images-wrapper relative to .container-wrapper.
• Alignment and spacing of the circular text () with respect to other elements in the section.
• Any adjustments needed to ensure responsive behavior across different screen sizes.

Expected Outcome:

I want the section to match the design mockup precisely, with proper alignment and spacing of text and images within .container-wrapper, and the circular text () positioned correctly without overlap or misalignment.

Screenshots:

Current Appearance: Current Appearance
Desired Appearance: Desired Appearance

Any insights or suggestions on how to achieve the desired layout would be greatly appreciated. Thank you!