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

<html>
<!-- ================================
     منوی خدمات موبایل
     Mobile First / SEO Friendly
================================ -->

<section class="mobile-services" aria-label="دسته‌بندی خدمات">

  <nav class="mobile-services__grid" aria-label="منوی خدمات">

    <!-- خدمات -->
    <a href="#" class="mobile-service" aria-label="خدمات">
      <i class="fa-solid fa-cube" aria-hidden="true"></i>
      <span>خدمات</span>
    </a>

    <!-- زیبایی و پوشاک -->
    <a href="#" class="mobile-service" aria-label="زیبایی و پوشاک">
      <i class="fa-solid fa-person-dress" aria-hidden="true"></i>
      <span>زیبایی و پوشاک</span>
    </a>

    <!-- لوازم -->
    <a href="#" class="mobile-service" aria-label="لوازم">
      <i class="fa-solid fa-bed" aria-hidden="true"></i>
      <span>لوازم</span>
    </a>

    <!-- صنعت -->
    <a href="#" class="mobile-service" aria-label="صنعت">
      <i class="fa-solid fa-gears" aria-hidden="true"></i>
      <span>صنعت</span>
    </a>

    <!-- موبایل -->
    <a href="#" class="mobile-service" aria-label="موبایل">
      <i class="fa-solid fa-mobile-screen-button" aria-hidden="true"></i>
      <span>موبایل</span>
    </a>

    <!-- آموزش -->
    <a href="#" class="mobile-service" aria-label="آموزش">
      <i class="fa-solid fa-book" aria-hidden="true"></i>
      <span>آموزش</span>
    </a>

    <!-- کامپیوتر -->
    <a href="#" class="mobile-service" aria-label="کامپیوتر">
      <i class="fa-solid fa-laptop" aria-hidden="true"></i>
      <span>کامپیوتر</span>
    </a>

    <!-- کار و اشتراک -->
    <a href="#" class="mobile-service" aria-label="کار و اشتراک">
      <i class="fa-solid fa-users" aria-hidden="true"></i>
      <span>کار و اشتراک</span>
    </a>

    <!-- ملکی -->
    <a href="#" class="mobile-service" aria-label="ملکی">
      <i class="fa-solid fa-house" aria-hidden="true"></i>
      <span>ملکی</span>
    </a>

    <!-- خودرو -->
    <a href="#" class="mobile-service" aria-label="خودرو">
      <i class="fa-solid fa-car" aria-hidden="true"></i>
      <span>خودرو</span>
    </a>

    <!-- تورهای مسافرتی -->
    <a href="#" class="mobile-service" aria-label="تورهای مسافرتی">
      <i class="fa-solid fa-plane" aria-hidden="true"></i>
      <span>تورهای مسافرتی</span>
    </a>

    <!-- استخدام -->
    <a href="#" class="mobile-service mobile-service--orange" aria-label="استخدام">
      <i class="fa-solid fa-person" aria-hidden="true"></i>
      <span>استخدام</span>
    </a>

  </nav>

</section>


<!-- Font Awesome -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>


<style>

/* =========================================
   Mobile Services
   Mobile First
========================================= */

.mobile-services{
  width:100%;
  max-width:100%;
  padding:4px 6px;
  margin:0 auto;
  box-sizing:border-box;
  direction:rtl;
  font-family:IRANSans, Tahoma, Arial, sans-serif;
}

/* شبکه 4 ستونه */
.mobile-services__grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:3px;
  box-sizing:border-box;
}

/* =========================================
   کارت
========================================= */

.mobile-service{
  min-width:0;
  height:84px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  background:#fff;
  color:#16245c;

  text-decoration:none;
  text-align:center;

  border:1px solid #e1e1e1;
  border-radius:9px;

  box-shadow:
    0 2px 5px rgba(0,0,0,.10);

  box-sizing:border-box;

  /* جلوگیری از انتخاب ناخواسته متن در موبایل */
  -webkit-tap-highlight-color:transparent;

  transition:
    background-color .2s ease,
    box-shadow .2s ease;
}

/* =========================================
   آیکون
========================================= */

.mobile-service i{
  display:block;

  font-size:19px;
  line-height:1;

  margin-bottom:9px;

  color:#858585;

  transition:color .2s ease;
}

/* =========================================
   متن
========================================= */

.mobile-service span{
  display:block;

  width:100%;
  padding:0 2px;

  box-sizing:border-box;

  font-size:13px;
  line-height:1.35;

  font-weight:400;

  color:#16245c;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* استخدام - نارنجی */
.mobile-service--orange span{
  color:#f07820;
}

.mobile-service--orange i{
  color:#858585;
}


/* =========================================
   لمس موبایل
========================================= */

@media (hover:hover){

  .mobile-service:hover{
    background:#fafafa;
    box-shadow:
      0 3px 8px rgba(0,0,0,.14);
  }

  .mobile-service:hover i{
    color:#555;
  }

  .mobile-service--orange:hover span{
    color:#e5660d;
  }

}


/* =========================================
   موبایل‌های خیلی کوچک
========================================= */

@media (max-width:360px){

  .mobile-services{
    padding-left:4px;
    padding-right:4px;
  }

  .mobile-services__grid{
    gap:3px;
  }

  .mobile-service{
    height:78px;
    border-radius:8px;
  }

  .mobile-service i{
    font-size:17px;
    margin-bottom:7px;
  }

  .mobile-service span{
    font-size:11px;
  }

}


/* =========================================
   موبایل‌های بزرگ
========================================= */

@media (min-width:430px) and (max-width:767px){

  .mobile-services{
    padding-left:8px;
    padding-right:8px;
  }

  .mobile-services__grid{
    gap:4px;
  }

  .mobile-service{
    height:88px;
  }

  .mobile-service i{
    font-size:20px;
  }

  .mobile-service span{
    font-size:13px;
  }

}


/* =========================================
   فقط موبایل
   تبلت و دسکتاپ = مخفی
========================================= */

@media (min-width:768px){

  .mobile-services{
    display:none !important;
  }

}

</style>
</html>