Untitled fiddle

by alyonani

HTML

<div class="mobile-app-card">
  <div class="mobile-card-header">
    <img class="mobile-app-icon" src="https://help.apple.com/assets/69F8EBBDF3B89A4F6E0C704C/69F8EBC43862495245036393/ar_EG/0db59df6e2dbd46a2ca6f529a9c52606.png" alt="آيقونة التطبيق">
    <div class="mobile-header-info">
      <h2 class="mobile-app-title">تطبيق أحترافي لتسجيل المكالمات تلقائياً</h2>
      <div class="mobile-badges-group">
        <span class="mobile-badge">نسخة كاملة أوفلاين</span>
        <span class="mobile-badge mobile-badge-success">🛡️ آمن ومفحوص</span>
      </div>
    </div>
  </div>

  <p class="mobile-app-desc">
    برنامج تسجيل المكالمات الاحترافي يتيح لك تسجيل جميع المكالمات الصادرة والواردة بجودة عالية وبشكل تلقائي بدون الحاجة للاتصال بالإنترنت.
  </p>

  <ul class="mobile-features-list">
   <li>تسجيل تلقائي بجودة MP3 عالية</li>
    <li>حماية التسجيلات برقم سري أو بصمة</li>
    <li>دعم الميكروفون والسماعة الخارجية</li>
    <li>نسخ احتياطي سحابي اختياري</li>
  </ul>

  <div class="mobile-screenshots-container">
    <div class="mobile-screenshots-title">لقطات من داخل التطبيق:</div>
    <div class="mobile-screenshots-scroll">
      <img class="mobile-app-shot" src="https://upload.wikimedia.org/wikipedia/ar/7/79/IOS_17_Homescreen.png" alt="الشاشة الرئيسية">
      <img class="mobile-app-shot" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCuFnQVtAFqPECchprmugbEQzCLiSaGsWUp7Xd_xgk4ANUSOAUzBOhTA&s=10" alt="سجل المكالمات">
      <img class="mobile-app-shot" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSey970DEmGtMKHRRarfcpDrzKqaQY1Qr5l6MGgGm4l09rSX8kJ4CIBmw0&s=10" alt="الإعدادات">
      <img class="mobile-app-shot" src="https://img.youm7.com/images/NewsPics/gallery/pics/8201544184571.jpg" alt="مشغل الصوت">
    </div>
  </div>

  <div class="mobile-grid-stats">
    <div class="mobile-stat-item">
      <span class="mobile-stat-label">الإصدار</span>
      <span class="mobile-stat-value">v26.3 (2025)</span>
    </div>
 ...

CSS

<style>
:root{--primary-color:#0066cc;--primary-hover:#0052a3;--bg-card:#ffffff;--text-main:#1d1d1f;--text-muted:#6e6e73;--border-color:#e5e5ea}
.mobile-app-card{direction:rtl;max-width:750px;margin:25px auto;background:var(--bg-card);border-radius:20px;border:1px solid var(--border-color);box-shadow:0 12px 32px rgba(0,0,0,0.05);padding:24px;box-sizing:border-box}
.mobile-card-header{display:flex;align-items:center;gap:16px;margin-bottom:16px}
img.mobile-app-icon{width:80px!important;height:auto;border-radius:18px;object-fit:cover;box-shadow:0 6px 16px rgba(0,0,0,0.08);flex-shrink:0}
.mobile-header-info{display:flex;flex-direction:column;gap:6px}
.mobile-app-title{font-size:1.25rem;font-weight:700;color:var(--text-main);margin:0;line-height:1.4}
.mobile-badges-group{display:flex;gap:8px;flex-wrap:wrap}
.mobile-badge{display:inline-flex;align-items:center;gap:4px;background-color:#e8f2ff;color:var(--primary-color);font-size:0.75rem;font-weight:600;padding:4px 10px;border-radius:20px}
.mobile-badge-success{background-color:#e6f4ea;color:#137333}
.mobile-app-desc{color:var(--text-muted);font-size:0.92rem;line-height:1.6;margin:0 0 16px 0}
.mobile-features-list{list-style:none;padding:0;margin:0 0 20px 0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-size:0.85rem;color:var(--text-main)}
.mobile-features-list li::before{content:"✓";color:var(--primary-color);font-weight:bold;margin-left:6px}
.mobile-screenshots-container{margin-bottom:20px}
.mobile-screenshots-title{font-size:18px;font-weight:700;color:var(--text-main);margin-bottom:10px}
.mobile-screenshots-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.mobile-screenshots-scroll::-webkit-scrollbar{height:6px}
.mobile-screenshots-scroll::-webkit-scrollbar-thumb{background:#d1d1d6;border-radius:10px}
.mobile-app-shot{width:110px!important;height:auto;border-radius:12px;object-fit:cover;border:1px solid...