<?php
defined( 'ABSPATH' ) || exit;
return <<<'SHCD_FRAGMENT'
<div class="features section panel" id="features">
<div class="section-outer panel py-6 sm:py-8 lg:py-9 xl:py-10" style="background-color: #dbf2ff">
<img alt="victor" class="position-absolute start-0 w-250px xl:w-auto" src="%%SHCD_IMG_i0%%" style="top: 11%"/>
<img alt="victor" class="position-absolute end-0 w-200px xl:w-auto" src="%%SHCD_IMG_i1%%" style="bottom: 6%"/>
<div class="container sm:max-w-lg xl:max-w-xl">
<div class="section-inner panel">
<div class="section-header panel sm:max-w-500px xl:max-w-800px mx-auto mb-4 sm:mb-6 xl:mb-9 text-center" data-anime="onview: true; translateY: [48, 0]; opacity: [0, 1]; delay: 200;">
<h2 class="h4 sm:h3 xl:h2 m-0 rotate-2 text-uppercase ls-0">%%SHCD_TEXT_t0%%</h2>
</div>
<div class="section-content panel text-center">
<div class="row child-cols-12 sm:child-cols-6 lg:child-cols-4 justify-center g-3 lg:g-4 xl:g-4 col-match" data-anime="onview: -400; targets: &gt;*; translateY: [24, 0]; opacity: [0, 1]; delay: anime.stagger(100, {start: 200});">
<div>
<div class="features-item panel vstack gap-4 xl:gap-6 px-4 py-6 xl:px-5 xl:py-8 border border-2 border-black contrast-shadow-md text-black bg-white rotate-1">
<div class="feature-item-image">
<img alt="تصویر" class="image h-100px xl:h-150px mx-auto" src="%%SHCD_IMG_i2%%"/>
</div>
<div class="feature-item-content">
<h4 class="title h5 xl:h4 mb-2 xl:mb-3 stroke-text">%%SHCD_TEXT_t1%%</h4>
<p class="desc fs-5 xl:fs-4">%%SHCD_TEXT_t2%%</p>
</div>
</div>
</div>
<div>
<div class="features-item panel vstack gap-4 xl:gap-6 px-4 py-6 xl:px-5 xl:py-8 border border-2 border-black contrast-shadow-md text-black bg-white -rotate-1">
<div class="feature-item-image">
<img alt="تصویر" class="image h-100px xl:h-150px mx-auto" src="%%SHCD_IMG_i3%%"/>
</div>
<div class="feature-item-content">
<h4 class="title h5 xl:h4 mb-2 xl:mb-3 stroke-text">%%SHCD_TEXT_t3%%</h4>
<p class="desc fs-5 xl:fs-4">%%SHCD_TEXT_t4%%</p>
</div>
</div>
</div>
<div>
<div class="features-item panel vstack gap-4 xl:gap-6 px-4 py-6 xl:px-5 xl:py-8 border border-2 border-black contrast-shadow-md text-black bg-white rotate-1">
<div class="feature-item-image">
<img alt="تصویر" class="image h-100px xl:h-150px mx-auto" src="%%SHCD_IMG_i4%%"/>
</div>
<div class="feature-item-content">
<h4 class="title h5 xl:h4 mb-2 xl:mb-3 stroke-text">%%SHCD_TEXT_t5%%</h4>
<p class="desc fs-5 xl:fs-4">%%SHCD_TEXT_t6%%</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
SHCD_FRAGMENT;
