/* Универсальная обёртка для любого инстанса */
.mosaic-wrap{
  --gap:8px; --radius:14px; --shadow:0 4px 18px rgba(0,0,0,.10); --text:#ebeff4; --muted:#9aa3ad; --accent:#79d2ff; --card-bg:#111318; 
  background:transparent;
}

.mosaic-wrap .mosaic{ display:grid; gap:var(--gap); margin:0; padding:0; grid-auto-rows:10px; grid-auto-flow:dense; }
@media (min-width:2201px){ .mosaic-wrap .mosaic{ grid-template-columns:repeat(6,1fr);} }
@media (min-width:1921px) and (max-width:2200px){ .mosaic-wrap .mosaic{ grid-template-columns:repeat(5,1fr);} }
@media (min-width:1601px) and (max-width:1920px){ .mosaic-wrap .mosaic{ grid-template-columns:repeat(4,1fr);} }
@media (min-width:1201px) and (max-width:1600px){ .mosaic-wrap .mosaic{ grid-template-columns:repeat(4,1fr);} }
@media (min-width:981px) and (max-width:1200px){ .mosaic-wrap .mosaic{ grid-template-columns:repeat(3,1fr);} }
@media (min-width:768px) and (max-width:980px){ .mosaic-wrap .mosaic{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:767px){ .mosaic-wrap .mosaic{ grid-template-columns:repeat(2,1fr);} }

.mosaic-wrap .tile{ position:relative; display:block; width:100%; border-radius:var(--radius); overflow:hidden; background:var(--card-bg); box-shadow:var(--shadow); isolation:isolate; animation:mosaic-flicker var(--fDur,7s) infinite ease-in-out; animation-delay:var(--fDel,0s); }
.mosaic-wrap .tile>.inner{ position:absolute; inset:0; }
.mosaic-wrap .tile img, .mosaic-wrap .tile video{ width:100%; height:100%; object-fit:cover; display:block; }
.mosaic-wrap .fade{ transition:opacity .35s ease; } 
.mosaic-wrap .changing .fade{ opacity:0; } 
@keyframes mosaic-flicker{ 0%,100%{filter:none;} 40%{filter:brightness(1.03) contrast(1.02);} 41%{filter:brightness(0.96);} 70%{filter:brightness(1.02);} 71%{filter:brightness(0.98);} 95%{filter:none;} }

.mosaic-wrap .s-1x1{ grid-row: span 18; }
.mosaic-wrap .s-1x2{ grid-row: span 36; }
.mosaic-wrap .s-2x1{ grid-column: span 2; grid-row: span 18; }
.mosaic-wrap .s-2x2{ grid-column: span 2; grid-row: span 36; }
.mosaic-wrap .s-3x1{ grid-column: span 3; grid-row: span 18; }
@media (max-width:1200px){ .mosaic-wrap .s-3x1{ grid-column: span 2; } }
@media (max-width:980px){ .mosaic-wrap .s-2x2{ grid-column: span 2; } .mosaic-wrap .s-3x1{ grid-column: span 2; } }
@media (max-width:767px){ .mosaic-wrap .s-2x1, .mosaic-wrap .s-2x2, .mosaic-wrap .s-3x1{ grid-column: span 2; } }

.mosaic-wrap .tile.t-text .inner{ display:grid; align-content:end; padding:22px; background:radial-gradient(120% 80% at 100% 0%, rgba(121,210,255,.16), transparent 60%), linear-gradient(180deg,#12141c 0%, #0e1016 100%); }
.mosaic-wrap .tile.t-text .eyebrow{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.mosaic-wrap .tile.t-text h3{ margin:.25rem 0 .4rem; line-height:1.1; font-size:clamp(20px,2.2vw,34px); color:var(--text); font-weight:800; }
.mosaic-wrap .tile.t-text p{ margin:0; color:var(--muted); font-size:clamp(14px,1.4vw,16px); }
.mosaic-wrap .tile.t-text .accent{ color:var(--accent); }

.mosaic-wrap .t-video::after{
  content:""; position:absolute; right:12px; bottom:12px; width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,.35); box-shadow:0 2px 8px rgba(0,0,0,.35) inset;
  -webkit-mask: radial-gradient(circle 18px at 50% 50%, #000 98%, transparent) exclude, polygon(42% 33%, 42% 67%, 70% 50%);
  mask: radial-gradient(circle 18px at 50% 50%, #000 98%, transparent) exclude, polygon(42% 33%, 42% 67%, 70% 50%);
}