.mashup-hero-grid{ --grid-columns:3; display:grid; gap:16px; }
.mashup-hero-grid .item{ position:relative; overflow:hidden; border-radius:8px; }
.mashup-hero-grid .item .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mashup-hero-grid .item .title{ position:absolute; left:12px; bottom:12px; margin:0;
  padding:8px 10px; background:rgba(0,0,0,.55); color:#fff; font:600 18px/1.2 system-ui; border-radius:6px; }

/* Pattern 1: un solo articolo grande */
.mashup-hero-grid.hero-1{ grid-template-columns: 1fr; }
.mashup-hero-grid.hero-1 .item-1{ min-height:380px; }

/* Pattern 2: due affiancati */
.mashup-hero-grid.hero-2{ grid-template-columns: repeat(2,1fr); }
.mashup-hero-grid.hero-2 .item{ min-height:320px; }

/* Pattern 3: 1 grande + 2 a lato (come screenshot) */
.mashup-hero-grid.hero-3{
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: 1fr;
}
.mashup-hero-grid.hero-3 .item-1{ grid-column:1; grid-row:1 / span 2; min-height:420px; }
.mashup-hero-grid.hero-3 .item-2{ grid-column:2; min-height:205px; }
.mashup-hero-grid.hero-3 .item-3{ grid-column:2; min-height:205px; }

/* Pattern 4: quattro a griglia */
.mashup-hero-grid.hero-4{ grid-template-columns: repeat(2,1fr); }
.mashup-hero-grid.hero-4 .item{ min-height:260px; }

.mashup-hero-grid .e-loop-item,
.mashup-hero-grid .e-loop-item > div,
.mashup-hero-grid .e-loop-item > div > div,
.mashup-hero-grid .e-loop-item > div > div > div:first-of-type,
.mashup-hero-grid .e-loop-item > div > div > div > figure,
.mashup-hero-grid .e-loop-item > div > div > div > figure > a,
.mashup-hero-grid .e-loop-item > div > div > div > figure > a > img {
	height: 100% !important;
}

@media (min-width:1024px){
  .mashup-hero-grid.hero-4{ grid-template-columns: repeat(4,1fr); }
}