Pin the before content when doing horizontal scroll

I am using GSAP for horizontal scrolling. Here it is working but I need to stick the above inro also untill horizontal scroll end. Currently it scrolls up and horizontal scrolling start.

<div class="container">
    <div class="process__intro__wrap" >
        <div class="process__intro">
            <div class="process__intro__title">
                <% if $ShowTitle %>
                    <h2>{$Title}</h2>
                <% end_if %>
            </div>
            <div class="process__intro__desc">
                $ElementProcessDescription
            </div>
        </div>
        <% if $ElementProcessLink %>
        <div class="process__intro__cta">
            <a href="$ElementProcessLink.LinkURL" class="btn">
                {$ElementProcessLink.Title}
                <% include SVG/arrow %>
            </a>
        </div>
        <% end_if %>
    </div>
    <div class="process__grid__wrap">
        <div class="mobile-hide" >
            <div class="process__grid horiz-gallery-wrapper"  > 
                <div class="process__items horiz-gallery-strip">
                        <% loop $getPathwayElements %>
                            <div class="process__item sticky-process-item ">
                                <div class="process__item__title">
                                    <div class="process__item__num">
                                        <h4>$Counter</h4>
                                    </div>
                                    <div class="process__item__topic">
                                        <h4>$Title</h4>
                                    </div>
                                </div>
                                <div class="process__item__desc">
                                    $Description.Raw
                                </div>
                            </div>
                        <% end_loop %>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="process__grid desktop-hide" data-fadein> 
        <div class="process__items js-clients-carousel">
                <% loop $getPathwayElements %>
                    <div class="process__item">
                        <div class="process__item__title">
                            <div class="process__item__num">
                                <h4>$Counter</h4>
                            </div>
                            <div class="process__item__topic">
                                <h4>$Title</h4>
                            </div>
                        </div>
                        <div class="process__item__desc">
                            $Description.Raw
                        </div>
                    </div>
                <% end_loop %>
            </div>
        </div>
    </div>
</div>

This is the js code which is using GSAP scrolling should be happen if there are more than 2 elements. currently block intro scrolls up then starts horizontal scrolling. It looks odd in big screens.
“

import gsap from "gsap";
import { ScrollTrigger } from 'gsap/ScrollTrigger';

export default () => {
  const buildProcess = document.querySelectorAll(".process");
  gsap.registerPlugin(ScrollTrigger);
  const processBlocks = gsap.utils.toArray('.process');

  processBlocks.forEach((processBlock) => {
    const horizontalSections = gsap.utils.toArray(processBlock.querySelectorAll('.horiz-gallery wrapper'));
    const processElements = processBlock.querySelectorAll('.sticky-process-item');

    if (processElements.length > 2) {
      horizontalSections.forEach((sec) => {
        const pinWrap = sec.querySelector(".horiz-gallery-strip");

        if (!pinWrap) {
          console.warn('No pinWrap found for', sec);
          return;
        }

        let pinWrapWidth;
        let horizontalScrollLength;

        function refresh() {
          pinWrapWidth = pinWrap.scrollWidth + 320; // Adjust width as needed
          horizontalScrollLength = pinWrapWidth - window.innerWidth;
          
        }

        refresh();

        gsap.to(pinWrap, {
          scrollTrigger: {
            scrub: 1,
            trigger: processBlock.querySelector('.process__grid__wrap'), // Use the grid wrap as the trigger
            pin: true,
            start: "center center", // Adjust to control when the horizontal scroll should start
            end: () => `+=${pinWrapWidth}`,
            invalidateOnRefresh: true,
            onEnter: () => console.log(`Entering ${sec}`),
            onLeave: () => console.log(`Leaving ${sec}`)
          },
          x: () => -horizontalScrollLength,
          ease: "none"
        });

        ScrollTrigger.addEventListener("refreshInit", refresh);
      });
    }
  });
};`

`

I tried to change start atribute but it was not success.