/* Design Tokens incl. Aspect Ratio */
:root {
  --szif-gap: 12px;
  --szif-radius: 8px;
  --szif-cols: 3;
  --szif-aspect: 4 / 5; /* Portrait 4:5 wie IG */
  --szif-badge-bg: rgba(0,0,0,.65);
  --szif-badge-color: #fff;
  --szif-skeleton-bg: #f5f5f5;
  --szif-overlay-bg: none;
}
.szif-grid { display:grid; grid-gap:var(--szif-gap); grid-template-columns:repeat(var(--szif-cols,3),1fr); }
.szif-cols-1{--szif-cols:1}.szif-cols-2{--szif-cols:2}.szif-cols-3{--szif-cols:3}.szif-cols-4{--szif-cols:4}.szif-cols-5{--szif-cols:5}.szif-cols-6{--szif-cols:6}.szif-cols-7{--szif-cols:7}.szif-cols-8{--szif-cols:8}.szif-cols-9{--szif-cols:9}.szif-cols-10{--szif-cols:10}.szif-cols-11{--szif-cols:11}.szif-cols-12{--szif-cols:12}
.szif-item{position:relative;display:block;overflow:hidden;border-radius:var(--szif-radius)}
.szif-media-wrap{display:block;position:relative;aspect-ratio:var(--szif-aspect, 4 / 5);background:var(--szif-skeleton-bg)}
.szif-media-wrap::after{content:"";position:absolute;inset:0;background:var(--szif-overlay-bg);pointer-events:none}
.szif-media-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.szif-item:hover img{transform:scale(1.03)}
/* Video play overlay (centered) */
.szif-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25)}
.szif-play-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:28px;line-height:1}
.szif-badge{position:absolute;right:8px;bottom:8px;background:var(--szif-badge-bg);color:var(--szif-badge-color);font-size:14px;line-height:1;padding:6px 8px;border-radius:4px}
.szif-notice{padding:8px 10px;background:#fff8e5;border:1px solid #ffe8a1;border-radius:6px}