<?php
defined( 'ABSPATH' ) || exit;
return <<<'SHCD_FRAGMENT'
<div class="about section panel overflow-hidden" id="about">
<div class="section-outer panel py-6 sm:py-8 lg:py-9 xl:py-10 bg-secondary">
<div class="container sm:max-w-lg xl:max-w-2xl">
<div class="section-inner panel">
<div class="row child-cols-12 justify-center items-center g-4 sm:g-6 lg:g-9" data-anime="onview: -300; targets: &gt;*; translateY: [24, 0]; opacity: [0, 1]; delay: anime.stagger(100, {start: 200});">
<div class="lg:col order-1 lg:order-0">
<div class="about-content vstack gap-3 sm:gap-4 p-3 sm:p-4 xl:px-5 xl:py-6 border border-3 border-black contrast-shadow-xl bg-primary text-black">
<h2 class="title h5 sm:h3 xl:h2 mb-0 ls-0 text-uppercase text-white -rotate-1">%%SHCD_TEXT_t0%%</h2>
<div class="desc">
<p class="fs-6 sm:fs-5 xl:fs-4 mb-2 text-white">%%SHCD_TEXT_t1%%</p>
<p class="fs-6 sm:fs-5 xl:fs-4 text-white">%%SHCD_TEXT_t2%%</p>
</div>
<div class="buttons hstack gap-2 xl:gap-3">
<a class="btn btn-md xl:btn-2xl btn-secondary px-3 border border-3 border-black contrast-shadow-sm hover:-rotate-2" href="%%SHCD_LINK_l0%%">
<span>%%SHCD_TEXT_t3%%</span>
</a>
<a class="btn btn-blue-200 w-48px h-48px xl:w-64px xl:h-64px border border-3 border-black contrast-shadow-sm hover:-rotate-2" href="%%SHCD_LINK_l1%%">
<i class="icon-2 xl:icon-3 unicon-send-alt"></i>
</a>
</div>
</div>
</div>
<div class="lg:col-6 xl:col-auto order-0 lg:order-1 d-none lg:d-block">
<div class="about-image panel ms-4 me-9">
<img alt="تصویر" src="%%SHCD_IMG_i0%%"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
SHCD_FRAGMENT;
