body{ font-family:sans-serif; background:#f۵f۵f۵; } .wrapper{ margin:auto; text-align:center; } /* ===== کارت مشترک ===== */ /* کارت‌ها */ .card, .main-card{ border:۳px solid #fff; border-radius:۱۶px; overflow:hidden; background:#fff; display:flex; flex-direction: column; /* چینش عمودی */ } /* ===== کارت بالا ===== */ .main-card{ width:۳۶۰px; margin:۰ auto ۴۰px; box-shadow: ۰ ۸px ۲۰px rgba(۰,۰,۰,۰.۰۸); } /* ===== کارت‌های پایین ===== */ .cards{ display:grid; grid-template-columns:repeat(۴, ۱fr); gap:۲۰px; justify-items:center; } .card{ width:۲۲۰px; height: ۲۶۰px; } /* عکس */ .card img, .main-card img{ width:۱۰۰%; height:auto; max-height:۲۰۰px; /* حداکثر ارتفاع */ object-fit:cover; display:block; margin:۰ auto; /* افقی وسط */ } /* ===== متن ===== */ .text{ padding:۳px; width:۱۰۰%; } /* ===== ریسپانسیو ===== */ media (max-width:۹۰۰px){ .cards{ grid-template-columns:repeat(۲,۱fr); } } media (max-width:۵۰۰px){ .main-card{ width:۱۰۰%; } .cards{ grid-template-columns:۱fr; } .card{ width:۱۰۰%; } }