/* ============================================================
   Weitere-Projekte-Modul (mod_jf_article_layouts default-2)
   HGD Design-Restore — Version 20260625.1  (2026-06-25)
   Bilder gleich groß (Grid 1fr + 1:1 cover), s/w -> Hover farbig,
   Titel mittig + erscheint bei Hover. Bild+Titel verlinkt.
   Versionsnummer bumpen in templates/cassiopeia_hgd/index.php
   ============================================================ */
.mod-jf-article-layouts.default-2{
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px;
  align-items: start;
}
.mod-jf-article-layouts.default-2 .item{ display:block; text-decoration:none; color:inherit; }
.mod-jf-article-layouts.default-2 .item .cnt{ position:relative; }
.mod-jf-article-layouts.default-2 .item .cnt img{
  display:block; width:100%; height:auto;
  aspect-ratio:1 / 1; object-fit:cover;
  filter:grayscale(100%); transition:filter .35s ease;
}
.mod-jf-article-layouts.default-2 .item:hover .cnt img,
.mod-jf-article-layouts.default-2 .item:focus-visible .cnt img{ filter:grayscale(0%); }
.mod-jf-article-layouts.default-2 .item .title{
  text-align:center; margin-top:.7rem;
  opacity:0; transition:opacity .3s ease;
}
.mod-jf-article-layouts.default-2 .item:hover .title,
.mod-jf-article-layouts.default-2 .item:focus-visible .title{ opacity:1; }
@media (max-width:768px){ .mod-jf-article-layouts.default-2{ grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width:576px){ .mod-jf-article-layouts.default-2{ grid-template-columns: 1fr !important; } }