کانتینر 4 تایی - فراغیب

<html>

<!-- استایل‌های لازم برای نمایش صحیح -->
<style>
  .sajad-categories {
    width: 100%;
    direction: rtl;
    margin: 20px 0;
  }

  .sajad-grid {
    display: grid;
    /* نمایش دو ستونه در دسکتاپ */
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .sajad-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 18px; /* گردی گوشه‌ها */
    aspect-ratio: 16 / 10; /* حفظ تناسب ابعاد */
    text-decoration: none;
    background-color: #f0f0f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }

  .sajad-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* پر کردن کامل کادر بدون دفرمه شدن */
    display: block;
    transition: transform 0.4s ease;
  }

  .sajad-card:hover img {
    transform: scale(1.08); /* زوم ملایم هنگام هاور */
  }

  /* ایجاد سایه ملایم زیر متن برای خوانایی بیشتر */
  .sajad-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 40%);
    pointer-events: none;
  }

  .sajad-label {
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 5;
    color: #fff; /* پیش‌فرض سفید برای خوانایی روی گرادینت تاریک */
    font-size: clamp(14px, 2vw, 18px); /* فونت ریسپانسیو */
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }

  /* استایل متن‌های تیره اگر عکس خیلی روشن باشد */
  .sajad-label--dark {
    color: #222;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
  }

  /* ریسپانسیو موبایل: زیر هم قرار گرفتن عکس‌ها */
  @media (max-width: 600px) {
    .sajad-grid {
      grid-template-columns: 1fr;
    }
    .sajad-card {
      aspect-ratio: 16 / 9;
    }
  }
  
  .sr-only {
    display: none;
  }
</style>

<section class="sajad-categories" aria-label="دسته‌بندی‌های پوشاک سجاد">
  <h2 class="sr-only">دسته‌بندی محصولات پوشاک سجاد</h2>

  <div class="sajad-grid">
    <!-- کارت اول -->
    <a href="/women/shomiz-manto" class="sajad-card" title="تی شرت نخی">
      <img src="https://dl.faraghaib.ir/m/101/m101shalvarset3.jpg" alt="تی شرت نخی پوشاک سجاد" loading="lazy">
      <span class="sajad-label">تی شرت نخی</span>
    </a>

    <!-- کارت دوم -->
    <a href="/women/jeans-belt" class="sajad-card" title="ست نخی تابستانه">
      <img src="https://dl.faraghaib.ir/m/101/m101shalvarset7.jpg" alt="ست نخی تابستانه پوشاک سجاد" loading="lazy">
      <span class="sajad-label">ست نخی تابستانه</span>
    </a>

    <!-- کارت سوم -->
    <a href="/women/scarf-shawl" class="sajad-card" title="بلوز نخی تابستانه">
      <img src="https://dl.faraghaib.ir/m/101/m101shalvarset5.jpg" alt="بلوز نخی تابستانه پوشاک سجاد" loading="lazy">
      <span class="sajad-label">بلوز نخی تابستانه</span>
    </a>

    <!-- کارت چهارم -->
    <a href="/women/shoes-bags" class="sajad-card" title="شلوار نخی تابستانه">
      <img src="https://dl.faraghaib.ir/m/101/m101shalvarset8.jpg" alt="شلوار نخی تابستانه پوشاک سجاد" loading="lazy">
      <span class="sajad-label">شلوار نخی تابستانه</span>
    </a>
  </div>
</section>


</html>