Untitled

<div className="frc-mx-auto frc-w-full frc-max-w-wrapper--desktop xl:frc-px-gap--none md:frc-py-space--xlarge frc-px-gap--large frc-pt-space--xlarge frc-pb-gap--xxlarge">
        <div className="md:frc-grid md:frc-grid-cols-3 md:frc-grid-flow-row md:frc-gap-gap--base">
          <div
            className={`md:frc-pr-space--xxlarge md:frc-pb-gap--none frc-pb-gap--xxlarge`}
          >
            {title ? <Heading {...title} /> : null}
          </div>
          {boxes?.map((box, index) => (
            <div
              className="frc-w-full md:frc-p-gap--none frc-py-gap--small"
              key={index}
            >
              <ServiceLifecycleBox {...box} />
            </div>
          ))}
          <div className="frc-col-span-3 frc-flex frc-justify-end">
            {sourceText ? (
              <Paragraph
                text={sourceText}
                color="black"
                font="sans"
                size="small"
              />
            ) : null}
          </div>
        </div>
      </div>