document.addEventListener('DOMContentLoaded', () => {
  const text = document.querySelector('.circular');
  const message = "We’re the bestie that you can be yourself with. ";
  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)`;
  }
});

<style>
  body {
    margin: 0;
  }
  
  .custom-section {
    background: linear-gradient(180deg, #D6F1FA 0%, #C5EAF7 100%);
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
  }
  
  .custom-section .container-wrapper {
    position: relative;
    width: 1510px;
    height: 430px;
    border: 2px dashed red;
    left: 75px;
    top: 110px;
    overflow: hidden;
    max-width: 1440px;
    z-index: 2;
  }
  
  .custom-section .text-section {
    width: 520px;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px dashed blue;
  }
  
  .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;
    z-index: 3;
  }
  
  .custom-section .spacer {
    flex: 1;
    border: 2px dashed green;
  }
  
  .custom-section .images-wrapper {
    width: 960px;
    height: 430px;
    position: absolute;
    left: 550px;
    display: flex;
    gap: 30px;
    border: 2px dashed purple;
    overflow: hidden;
    z-index: 3;
  }
  
  .custom-section .images-wrapper img {
    width: 300px;
    height: 430px;
  }
  
  .circular span {
    font: 14px Inter;
    height: 80px;
    position: absolute;
    left: 75px;
    transform-origin: bottom center;
    line-height: 16.94px;
  }
  
  .circular {
    width: 160px;
    height: 160px;
    border: 2px dashed yellow;
    position: relative;
    left: -10px;
  }

  @keyframes rotateText {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .circular {
    width: 160px;
    height: 160px;
    border: 2px dashed yellow;
    position: relative;
    animation: rotateText 10s linear infinite;
    z-index: 3;
  }

  .custom-section:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(102.77deg, rgba(197, 234, 246, 0) -6.69%, rgba(122, 177, 194, 0.7) 47.23%);
    left: 50%;
    top: 70px;
    transform-origin: top left;
    rotate: 20deg;
    transform: skew(-13deg);
    z-index: 1;
  }

  {% comment %}
  .blue-background {
    width: 1311px;
    height: 590px;
    left: 300px;
    background-color: blue;
    position: relative;
    opacity: 0.15;
    transform: rotate(30deg);
  }
  {% endcomment %}
</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>{{ section.settings.heading }}</h2>
      </div>
      <div class="text-container">
        <p>{{ section.settings.content }}</p>
      </div>
      <div class="spacer"></div>
      <h1 class="circular">
        {{ section.settings.circular_content }}
      </h1>
    </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>
  <div class="blue-background"></div>
</section>

{% schema %}
{
  "name": "Custom Section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Our jewelry"
    },
    {
      "type": "text",
      "id": "content",
      "label": "Content",
      "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor tincidunt posuere. Nam tempus, leo ac tempus hendrerit."
    },
    {
      "type": "text",
      "id": "circular_content",
      "label": "Circular Content",
      "default": "We’re the bestie that you can be yourself with."
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "slide",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Sample Section"
    }
  ]
}
{% endschema %}