/*
=========================================================
MAHEDI ALTAYS — المشاريع في الصفحة الرئيسية
=========================================================

القسم يستعير رأس المجلة نفسه (magazine-home-heading) عن
قصد لا عن كسل: ذلك القالب — الشعار الدائري، والعنوان
الكبير، والزرّ الجانبي — هو الذي يوقف الزائر في هذا الموقع.
واختراع قالب ثانٍ للغرض نفسه يعني أن يتعلّم الزائر لغتين.

فما هنا هو ما يزيد على ذلك الرأس: العدّاد، والشبكة.
=========================================================
*/

.projects-home{
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(var(--brand-bronze-rgb), .16);
}

/*
لمعة برونزية في الزاوية، كتلك التي في قسم المجلة. تُبقي
القسمين متآخيين بصريًّا وإن فصل بينهما قسم ثالث.
*/
.projects-home::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 15% 12%, rgba(var(--brand-bronze-rgb), .1), transparent 34%);
  pointer-events:none;
}

.projects-home > .container{
  position:relative;
}

.projects-home__tally{
  display:flex;
  flex-wrap:wrap;
  gap:18px;

  margin:0 0 26px;

  color:var(--brand-muted);
  font-size:14px;
}

/*
ثلاث بطاقات في سطر واحد على الشاشة الواسعة. وأكبر من
بطاقات شاشة المجال: هذه واجهة، وتلك فهرس.
*/
.projects-home__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
}

.projects-home__grid .card-project__media{
  aspect-ratio:4 / 3;
}

.projects-home__grid .card-project__body{
  padding:26px;
}

.projects-home__grid .card-project__body strong{
  font-family:"Cormorant Garamond", serif;
  font-size:33px;
  line-height:1.06;
}

/*
العربية لا تُقرأ بخطّ Cormorant — فهو خط لاتيني، والحروف
العربية تسقط إلى خطّ احتياطي بمقاس لا يناسب. فتبقى على
خطّها ومقاسها.
*/
html[lang="ar"] .projects-home__grid .card-project__body strong{
  font-family:inherit;
  font-size:23px;
  line-height:1.55;
}

@media (max-width:1050px){

  .projects-home__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:700px){

  .projects-home__grid{
    grid-template-columns:1fr;
  }
}