/* Super Gallery - front end. Every rule is scoped to .mdrg */

/* ---------- Base ---------- */
.mdrg{--mdrg-gap:16px;--mdrg-radius:14px;--mdrg-accent:#5a8a6e;--mdrg-speed:40s;--mdrg-ink:#0f172a;--mdrg-muted:#64748b;--mdrg-cols:3;--mdrg-cols-t:2;--mdrg-cols-m:1;--c:var(--mdrg-cols);position:relative;display:block;width:100%;max-width:100%;color:var(--mdrg-ink);line-height:1.45;box-sizing:border-box}
@media (max-width:900px){.mdrg{--c:var(--mdrg-cols-t)}}
@media (max-width:600px){.mdrg{--c:var(--mdrg-cols-m)}}
.mdrg *,.mdrg *::before,.mdrg *::after{box-sizing:border-box}
.mdrg .mdrg-stage{position:relative}
.mdrg .mdrg-items{display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:var(--mdrg-gap)}

.mdrg .mdrg-item{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;padding:0}
.mdrg .mdrg-frame{position:relative;flex:0 0 auto;overflow:hidden;aspect-ratio:var(--mdrg-ar,1/1);border-radius:var(--mdrg-radius);background:#e8edf0}
.mdrg .mdrg-img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;object-fit:cover;transition:transform .6s ease}
.mdrg .mdrg-link{position:absolute;inset:0;z-index:1;display:block}
.mdrg .mdrg-item[data-full]{cursor:zoom-in}
.mdrg .mdrg-item:hover .mdrg-img{transform:scale(1.06)}
.mdrg .mdrg-item:focus-visible{outline:3px solid var(--mdrg-accent);outline-offset:3px}

.mdrg .mdrg-cap{display:block;padding:10px 2px 0;margin:0}
.mdrg .mdrg-cap-t{display:block;font-size:15px;font-weight:700;line-height:1.3;color:var(--mdrg-ink)}
.mdrg .mdrg-cap-c{display:block;margin-top:2px;font-size:13.5px;color:var(--mdrg-muted)}

.mdrg .mdrg-num{position:absolute;top:10px;left:10px;z-index:3;padding:6px 9px;border-radius:6px;background:var(--mdrg-accent);color:#fff;font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em}

.mdrg .mdrg-head{margin:0 0 28px}
.mdrg .mdrg-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 12px;color:var(--mdrg-accent);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.mdrg .mdrg-eyebrow::before{content:"";width:34px;height:2px;background:currentColor}
.mdrg .mdrg-title{margin:0 0 8px;padding:0;color:var(--mdrg-ink);font-size:clamp(26px,3.6vw,40px);font-weight:800;line-height:1.15;letter-spacing:-.02em}
.mdrg .mdrg-sub{margin:0;color:var(--mdrg-muted);font-size:17px}

.mdrg .mdrg-stat{position:absolute;z-index:4;left:0;bottom:0;display:block;min-width:250px;padding:26px 34px;background:#1f3556;color:#fff;box-shadow:0 24px 50px -18px rgba(15,23,42,.5)}
.mdrg .mdrg-stat-n{display:block;color:#9ad0b0;color:color-mix(in srgb,var(--mdrg-accent),#fff 40%);font-size:44px;font-weight:800;line-height:1;letter-spacing:-.02em}
.mdrg .mdrg-stat-l{display:block;max-width:230px;margin-top:8px;font-size:17px;line-height:1.35}

.mdrg-note{margin:0;color:#64748b;font-size:14px}

/* Tiles that fill a grid cell, text appears on hover */
.mdrg.mdrg-ov .mdrg-item{display:block;overflow:hidden;border-radius:var(--mdrg-radius)}
.mdrg.mdrg-ov .mdrg-frame{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.mdrg.mdrg-ov .mdrg-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:46px 18px 16px;background:linear-gradient(to top,rgba(10,15,25,.8),rgba(10,15,25,0));opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s;pointer-events:none}
.mdrg.mdrg-ov .mdrg-item:hover .mdrg-cap,.mdrg.mdrg-ov .mdrg-item:focus-within .mdrg-cap{opacity:1;transform:none}
.mdrg.mdrg-ov .mdrg-cap-t{color:#fff}
.mdrg.mdrg-ov .mdrg-cap-c{color:rgba(255,255,255,.85)}
@media (hover:none){.mdrg.mdrg-ov .mdrg-cap{opacity:1;transform:none}}

/* ---------- 1. Classic grid ---------- */
.mdrg-t-grid-classic .mdrg-frame{aspect-ratio:var(--mdrg-ar,1/1)}

/* ---------- 2. Soft cards ---------- */
.mdrg-t-grid-cards{--mdrg-ar:4/3}
.mdrg-t-grid-cards .mdrg-item{padding:10px;border-radius:calc(var(--mdrg-radius) + 6px);background:#fff;box-shadow:0 10px 30px -14px rgba(15,23,42,.28);transition:transform .3s,box-shadow .3s}
.mdrg-t-grid-cards .mdrg-item:hover{transform:translateY(-4px);box-shadow:0 18px 38px -14px rgba(15,23,42,.35)}
.mdrg-t-grid-cards .mdrg-num{top:20px;left:20px}
.mdrg-t-grid-cards .mdrg-cap{padding:12px 6px 6px}

/* ---------- 3. Masonry ---------- */
.mdrg-t-masonry .mdrg-items{display:block;column-count:var(--c);column-gap:var(--mdrg-gap)}
.mdrg-t-masonry .mdrg-item{display:flex;margin-bottom:var(--mdrg-gap);break-inside:avoid}
.mdrg-t-masonry .mdrg-frame{aspect-ratio:auto}
.mdrg-t-masonry .mdrg-img{position:static;height:auto}

/* ---------- 4. Field ledger ---------- */
.mdrg-t-field-ledger{--mdrg-radius:3px}
.mdrg-t-field-ledger .mdrg-items{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(130px,15vw,210px);grid-auto-flow:dense}
.mdrg-t-field-ledger .mdrg-item{padding:12px;border-radius:6px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.06),0 16px 32px -20px rgba(15,23,42,.35)}
.mdrg-t-field-ledger .mdrg-frame{flex:1 1 auto;min-height:0;aspect-ratio:auto}
.mdrg-t-field-ledger .mdrg-num{top:-1px;right:18px;left:auto;border-radius:0 0 6px 6px}
.mdrg-t-field-ledger .mdrg-cap{padding:8px 2px 0}
.mdrg-t-field-ledger .mdrg-item:nth-child(7n+1){grid-column:span 2;grid-row:span 2}
.mdrg-t-field-ledger .mdrg-item:nth-child(7n+3){grid-row:span 2}
.mdrg-t-field-ledger .mdrg-item:nth-child(7n+6){grid-column:span 2}
@media (max-width:640px){.mdrg-t-field-ledger .mdrg-items{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 5 and 6. Marquees ---------- */
@keyframes mdrg-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.mdrg-t-film-strip .mdrg-stage,.mdrg-t-ticker .mdrg-stage{overflow:hidden}
.mdrg .mdrg-row{display:flex;width:max-content;animation:mdrg-scroll var(--mdrg-speed) linear infinite;will-change:transform}
.mdrg .mdrg-row .mdrg-item{flex:0 0 auto;width:clamp(200px,24vw,310px);margin-right:var(--mdrg-gap)}
.mdrg .mdrg-marq:hover .mdrg-row{animation-play-state:paused}
.mdrg-t-film-strip,.mdrg-t-ticker{--mdrg-gap:20px}
.mdrg-t-film-strip .mdrg-head,.mdrg-t-ticker .mdrg-head{text-align:center}
.mdrg-t-film-strip .mdrg-eyebrow,.mdrg-t-ticker .mdrg-eyebrow{justify-content:center}
.mdrg-t-film-strip .mdrg-eyebrow::before,.mdrg-t-ticker .mdrg-eyebrow::before{display:none}
.mdrg-t-film-strip{--mdrg-ar:3/2}
.mdrg-t-film-strip .mdrg-marq{width:110%;margin:0 -5%;padding:34px 0;transform:rotate(-2deg)}
.mdrg-t-film-strip .mdrg-row+.mdrg-row{margin-top:24px;animation-direction:reverse}
.mdrg-t-film-strip .mdrg-item{padding:7px;background:#fff;border-radius:6px;box-shadow:0 10px 26px -12px rgba(15,23,42,.35)}
.mdrg-t-film-strip .mdrg-item:nth-child(odd){transform:rotate(-1.2deg)}
.mdrg-t-film-strip .mdrg-item:nth-child(even){transform:rotate(1deg)}
.mdrg-t-film-strip .mdrg-frame{border-radius:3px}
.mdrg-t-ticker{--mdrg-ar:3/2}
.mdrg-t-ticker .mdrg-stage{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
@media (prefers-reduced-motion:reduce){.mdrg .mdrg-row{animation:none}.mdrg-t-film-strip .mdrg-stage,.mdrg-t-ticker .mdrg-stage{overflow-x:auto}}

/* ---------- 7. Stat collage ---------- */
.mdrg-t-stat-collage .mdrg-stage{padding-bottom:64px}
.mdrg-t-stat-collage .mdrg-items{grid-template-columns:1.35fr 1fr;grid-auto-rows:clamp(150px,19vw,250px)}
.mdrg-t-stat-collage .mdrg-item:nth-child(1){grid-row:span 2}
.mdrg-t-stat-collage .mdrg-item:nth-child(n+4){display:none}
.mdrg-t-stat-collage .mdrg-frame{flex:1 1 auto;aspect-ratio:auto}
@media (max-width:600px){.mdrg-t-stat-collage .mdrg-stat{min-width:0;padding:18px 22px}.mdrg .mdrg-stat-n{font-size:34px}}

/* ---------- 8. Floating counter ---------- */
.mdrg-t-floating-badge .mdrg-stage{max-width:560px;margin:0 auto;padding:48px 0 44px 48px}
.mdrg-t-floating-badge .mdrg-items{display:block;position:relative}
.mdrg-t-floating-badge .mdrg-item:nth-child(n+3){display:none}
.mdrg-t-floating-badge .mdrg-item:nth-child(1) .mdrg-frame{aspect-ratio:1/1;border-radius:calc(var(--mdrg-radius)*2.6) calc(var(--mdrg-radius)*2.6) calc(var(--mdrg-radius)*5) calc(var(--mdrg-radius)*2.6)}
.mdrg-t-floating-badge .mdrg-item:nth-child(2){position:absolute;top:-48px;left:-48px;width:36%}
.mdrg-t-floating-badge .mdrg-item:nth-child(2) .mdrg-frame{aspect-ratio:1/1;border-radius:50%;border:6px solid #fff;box-shadow:0 14px 30px -12px rgba(15,23,42,.4)}
.mdrg .mdrg-badge{position:absolute;z-index:4;left:0;bottom:0;padding:16px 22px 14px;border-radius:18px;background:#fff;box-shadow:0 18px 40px -12px rgba(15,23,42,.3)}
.mdrg .mdrg-badge-n{display:block;font-size:44px;font-weight:800;line-height:1.05;letter-spacing:-.02em;color:#1f3556}
.mdrg .mdrg-badge-l{display:block;margin-top:2px;font-size:17px;color:var(--mdrg-muted)}
.mdrg .mdrg-avs{display:flex;margin-top:10px}
.mdrg .mdrg-av{width:36px;height:36px;max-width:none;margin:0 0 0 -8px;border:2px solid #fff;border-radius:50%;object-fit:cover}
.mdrg .mdrg-av:first-child{margin-left:0}

/* ---------- 9. Shape collage ---------- */
.mdrg-t-shape-collage .mdrg-stage{padding:26px}
.mdrg-t-shape-collage .mdrg-stage::before{content:"";position:absolute;left:0;bottom:0;width:150px;height:150px;opacity:.4;background-image:radial-gradient(var(--mdrg-accent) 1.7px,transparent 2.2px);background-size:22px 22px}
.mdrg-t-shape-collage .mdrg-items{position:relative;grid-template-columns:1.25fr 1.25fr .9fr;grid-template-rows:repeat(3,clamp(110px,15vw,190px));grid-template-areas:"a a g" "a a b" "y c d"}
.mdrg-t-shape-collage .mdrg-item:nth-child(1){grid-area:a}
.mdrg-t-shape-collage .mdrg-item:nth-child(2){grid-area:b}
.mdrg-t-shape-collage .mdrg-item:nth-child(3){grid-area:c}
.mdrg-t-shape-collage .mdrg-item:nth-child(4){grid-area:d}
.mdrg-t-shape-collage .mdrg-item:nth-child(n+5){display:none}
.mdrg-t-shape-collage .mdrg-frame{flex:1 1 auto;aspect-ratio:auto}
.mdrg .mdrg-deco{display:block}
.mdrg-t-shape-collage .mdrg-deco.g{grid-area:g;border-radius:calc(var(--mdrg-radius)*1.6);background-color:var(--mdrg-accent);background-repeat:no-repeat;background-position:center;background-size:78% auto;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23f4b942' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M8 12q13-11 26 0t26 0 26 0 26 0'/%3E%3Cpath d='M8 26q13-11 26 0t26 0 26 0 26 0'/%3E%3Cpath d='M8 40q13-11 26 0t26 0 26 0 26 0'/%3E%3C/g%3E%3C/svg%3E")}
.mdrg-t-shape-collage .mdrg-deco.y{grid-area:y;align-self:center;justify-self:center;width:76%;aspect-ratio:1/1;border-radius:50%;background:#f4b942}

/* ---------- 10. Feature card ---------- */
.mdrg-t-feature-card .mdrg-stage{padding:14px 0 0 14px}
.mdrg-t-feature-card .mdrg-items{grid-template-columns:1fr 1.15fr;grid-template-areas:"a b" "c b";grid-auto-rows:auto}
.mdrg-t-feature-card .mdrg-item:nth-child(1){grid-area:a;align-self:start}
.mdrg-t-feature-card .mdrg-item:nth-child(1) .mdrg-frame{aspect-ratio:1/1}
.mdrg-t-feature-card .mdrg-item:nth-child(2){grid-area:b}
.mdrg-t-feature-card .mdrg-item:nth-child(2)::before{content:"";position:absolute;z-index:0;top:-14px;left:-14px;width:100%;height:100%;border:2px solid rgba(90,138,110,.35);border-radius:var(--mdrg-radius)}
.mdrg-t-feature-card .mdrg-item:nth-child(2) .mdrg-frame{flex:1 1 auto;aspect-ratio:auto;z-index:1;min-height:260px}
.mdrg-t-feature-card .mdrg-item:nth-child(n+3){display:none}
.mdrg-t-feature-card .mdrg-stat{position:static;grid-area:c;display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;padding:22px 24px;border-radius:var(--mdrg-radius);background:var(--mdrg-accent);box-shadow:none}
.mdrg-t-feature-card .mdrg-stat-n{color:#fff;font-size:26px;font-weight:600;letter-spacing:0}
.mdrg-t-feature-card .mdrg-stat-l{max-width:none;font-size:15px;opacity:.92}
.mdrg-t-feature-card .mdrg-ico{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--mdrg-accent)}

/* ---------- 11. Bento ---------- */
.mdrg-t-bento .mdrg-items{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(130px,16vw,210px);grid-auto-flow:dense}
.mdrg-t-bento .mdrg-item:nth-child(4n+1){grid-column:span 2;grid-row:span 2}
.mdrg-t-bento .mdrg-item:nth-child(4n+4){grid-column:span 2}
@media (max-width:640px){.mdrg-t-bento .mdrg-items{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 12. Hero grid ---------- */
.mdrg-t-hero-grid .mdrg-items{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(120px,15vw,200px)}
.mdrg-t-hero-grid .mdrg-item:nth-child(1){grid-column:span 2;grid-row:span 2}
@media (max-width:640px){.mdrg-t-hero-grid .mdrg-items{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 13. Polaroid ---------- */
.mdrg-t-polaroid{--mdrg-gap:28px;--mdrg-radius:2px}
.mdrg-t-polaroid .mdrg-item{padding:12px 12px 16px;border-radius:3px;background:#fff;box-shadow:0 14px 28px -14px rgba(15,23,42,.4);transition:transform .35s}
.mdrg-t-polaroid .mdrg-item:nth-child(4n+1){transform:rotate(-2.5deg)}
.mdrg-t-polaroid .mdrg-item:nth-child(4n+2){transform:rotate(1.8deg)}
.mdrg-t-polaroid .mdrg-item:nth-child(4n+3){transform:rotate(-1deg)}
.mdrg-t-polaroid .mdrg-item:nth-child(4n+4){transform:rotate(2.6deg)}
.mdrg-t-polaroid .mdrg-item:hover{z-index:5;transform:rotate(0) translateY(-6px) scale(1.03)}
.mdrg-t-polaroid .mdrg-num{top:20px;left:20px}
.mdrg-t-polaroid .mdrg-cap{padding:14px 4px 2px;text-align:center}

/* ---------- 14. Hover reveal ---------- */
.mdrg-t-overlay-hover{--mdrg-ar:4/5}
.mdrg-t-overlay-hover .mdrg-item{aspect-ratio:var(--mdrg-ar)}

/* ---------- 15. Image + text cards ---------- */
.mdrg-t-cards-text{--mdrg-ar:16/10;--mdrg-radius:12px}
.mdrg-t-cards-text .mdrg-item{overflow:hidden;border:1px solid #e5e9ef;border-radius:var(--mdrg-radius);background:#fff;transition:transform .3s,box-shadow .3s}
.mdrg-t-cards-text .mdrg-item:hover{transform:translateY(-4px);box-shadow:0 18px 34px -16px rgba(15,23,42,.3)}
.mdrg-t-cards-text .mdrg-frame{border-radius:0}
.mdrg-t-cards-text .mdrg-cap{padding:16px 18px 20px}
.mdrg-t-cards-text .mdrg-cap-t{font-size:17px}

/* ---------- 16. Carousel ---------- */
.mdrg-t-carousel .mdrg-items{display:flex;overflow-x:auto;gap:var(--mdrg-gap);padding:4px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mdrg-t-carousel .mdrg-items::-webkit-scrollbar{display:none}
.mdrg-t-carousel .mdrg-item{flex:0 0 calc((100% - var(--mdrg-gap)*(var(--c) - 1))/var(--c));scroll-snap-align:start}
.mdrg-t-carousel{--mdrg-ar:4/3}
.mdrg .mdrg-nav{position:absolute;z-index:5;top:40%;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--mdrg-ink);cursor:pointer;box-shadow:0 8px 22px -6px rgba(15,23,42,.4);transition:transform .2s}
.mdrg .mdrg-nav:hover{transform:scale(1.08)}
.mdrg .mdrg-nav.prev{left:-12px}
.mdrg .mdrg-nav.next{right:-12px}

/* ---------- 17. Text + images split ---------- */
.mdrg-t-split-text{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(24px,5vw,64px);align-items:center;--mdrg-ar:4/5}
.mdrg-t-split-text.mdrg-nohead{grid-template-columns:minmax(0,1fr)}
.mdrg-t-split-text .mdrg-head{margin:0}
.mdrg-t-split-text .mdrg-stage{padding-bottom:36px}
.mdrg-t-split-text .mdrg-items{grid-template-columns:repeat(2,minmax(0,1fr))}
.mdrg-t-split-text .mdrg-item:nth-child(even){transform:translateY(36px)}
@media (max-width:760px){.mdrg-t-split-text{grid-template-columns:minmax(0,1fr)}}

/* ---------- 18. Circle portraits ---------- */
.mdrg-t-circle-avatars{--mdrg-gap:30px}
.mdrg-t-circle-avatars .mdrg-item{align-items:center;text-align:center}
.mdrg-t-circle-avatars .mdrg-frame{width:100%;border-radius:50%;box-shadow:0 0 0 4px #fff,0 0 0 7px var(--mdrg-accent)}
.mdrg-t-circle-avatars .mdrg-num{top:4px;left:4px}
.mdrg-t-circle-avatars .mdrg-cap{padding-top:18px}

/* ---------- 19. Timeline ---------- */
.mdrg-t-timeline{--mdrg-ar:16/10}
.mdrg-t-timeline .mdrg-items{position:relative;display:flex;flex-direction:column;gap:calc(var(--mdrg-gap)*2);padding:8px 0}
.mdrg-t-timeline .mdrg-items::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#d7dee6}
.mdrg-t-timeline .mdrg-item{width:calc(50% - 36px)}
.mdrg-t-timeline .mdrg-item:nth-child(odd){align-self:flex-start;text-align:right}
.mdrg-t-timeline .mdrg-item:nth-child(even){align-self:flex-end}
.mdrg-t-timeline .mdrg-item::after{content:"";position:absolute;top:26px;width:14px;height:14px;border-radius:50%;background:var(--mdrg-accent);box-shadow:0 0 0 5px #fff,0 0 0 7px var(--mdrg-accent)}
.mdrg-t-timeline .mdrg-item:nth-child(odd)::after{right:-43px}
.mdrg-t-timeline .mdrg-item:nth-child(even)::after{left:-43px}
@media (max-width:640px){
	.mdrg-t-timeline .mdrg-items::before{left:10px}
	.mdrg-t-timeline .mdrg-item{width:calc(100% - 40px)}
	.mdrg-t-timeline .mdrg-item:nth-child(odd),.mdrg-t-timeline .mdrg-item:nth-child(even){align-self:flex-end;text-align:left}
	.mdrg-t-timeline .mdrg-item:nth-child(odd)::after,.mdrg-t-timeline .mdrg-item:nth-child(even)::after{left:-37px;right:auto}
}

/* ---------- 20. Stacked fan ---------- */
.mdrg-t-stacked-fan{--mdrg-ar:3/4;--w:clamp(110px,18vw,210px)}
.mdrg-t-stacked-fan .mdrg-items{display:flex;justify-content:center;gap:0;padding:40px 20px}
.mdrg-t-stacked-fan .mdrg-item{flex:0 0 auto;z-index:var(--i);width:var(--w);margin-left:calc(var(--w)*-.3);border:6px solid #fff;border-radius:calc(var(--mdrg-radius) + 4px);background:#fff;box-shadow:0 18px 34px -14px rgba(15,23,42,.45);transform:rotate(calc((var(--i) - (var(--mdrg-n) + 1)/2)*5deg));transition:transform .35s,z-index 0s}
.mdrg-t-stacked-fan .mdrg-item:first-child{margin-left:0}
.mdrg-t-stacked-fan .mdrg-item:nth-child(n+8){display:none}
.mdrg-t-stacked-fan .mdrg-item:hover{z-index:20;transform:rotate(0) translateY(-18px) scale(1.07)}

/* ---------- 21. Brick mosaic ---------- */
.mdrg-t-mosaic-brick{--mdrg-ar:1/1}
.mdrg-t-mosaic-brick .mdrg-items{grid-auto-flow:row}
.mdrg-t-mosaic-brick .mdrg-item{transition:transform .3s}
.mdrg-t-mosaic-brick .mdrg-item:hover{transform:translateY(-5px)}
.mdrg-t-mosaic-brick .mdrg-item:nth-child(2n){transform:translateY(16px)}
.mdrg-t-mosaic-brick .mdrg-item:nth-child(2n):hover{transform:translateY(11px)}
@media (max-width:600px){.mdrg-t-mosaic-brick .mdrg-item:nth-child(2n),.mdrg-t-mosaic-brick .mdrg-item:nth-child(2n):hover{transform:none}}

/* ---------- 22. Spotlight ---------- */
.mdrg-t-spotlight .mdrg-items{grid-template-columns:2fr 1fr;grid-auto-rows:clamp(90px,11vw,150px);grid-auto-flow:dense}
.mdrg-t-spotlight .mdrg-item:nth-child(1){grid-column:1;grid-row:span 3}
.mdrg-t-spotlight .mdrg-item:nth-child(1) .mdrg-frame{flex:1 1 auto;aspect-ratio:auto;min-height:100%}
.mdrg-t-spotlight .mdrg-item:nth-child(n+2){grid-column:2}
.mdrg-t-spotlight .mdrg-item:nth-child(n+5){display:none}
.mdrg-t-spotlight .mdrg-item:nth-child(n+2) .mdrg-frame{flex:1 1 auto;aspect-ratio:auto;min-height:100%}
@media (max-width:640px){
	.mdrg-t-spotlight .mdrg-items{grid-template-columns:repeat(2,minmax(0,1fr))}
	.mdrg-t-spotlight .mdrg-item:nth-child(1){grid-column:span 2;grid-row:span 2}
}

/* ---------- 23. Magazine ---------- */
.mdrg-t-magazine .mdrg-items{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(150px,20vw,260px)}
.mdrg-t-magazine .mdrg-item:nth-child(1){grid-column:span 2}
.mdrg-t-magazine .mdrg-item:nth-child(4n+4),.mdrg-t-magazine .mdrg-item:nth-child(4n+5){grid-column:span 2}
@media (max-width:640px){
	.mdrg-t-magazine .mdrg-items{grid-template-columns:minmax(0,1fr)}
	.mdrg-t-magazine .mdrg-item{grid-column:1 !important}
}

/* ---------- 24. Honeycomb ---------- */
.mdrg-t-honeycomb{--mdrg-gap:14px}
.mdrg-t-honeycomb .mdrg-items{grid-auto-flow:row}
.mdrg-t-honeycomb .mdrg-frame{aspect-ratio:1/1;border-radius:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mdrg-t-honeycomb .mdrg-item{transition:transform .3s}
.mdrg-t-honeycomb .mdrg-item:hover{transform:scale(1.05)}
.mdrg-t-honeycomb .mdrg-item:nth-child(2n){transform:translateY(42%)}
.mdrg-t-honeycomb .mdrg-item:nth-child(2n):hover{transform:translateY(42%) scale(1.05)}
@media (max-width:600px){.mdrg-t-honeycomb .mdrg-item:nth-child(2n),.mdrg-t-honeycomb .mdrg-item:nth-child(2n):hover{transform:none}.mdrg-t-honeycomb .mdrg-item:hover{transform:scale(1.05)}}

/* ---------- 25. Tilted grid ---------- */
.mdrg-t-tilted-grid .mdrg-item{transition:transform .35s,box-shadow .35s;box-shadow:0 10px 26px -16px rgba(15,23,42,.4)}
.mdrg-t-tilted-grid .mdrg-item:nth-child(3n+1){transform:rotate(-2.5deg)}
.mdrg-t-tilted-grid .mdrg-item:nth-child(3n+2){transform:rotate(1.5deg)}
.mdrg-t-tilted-grid .mdrg-item:nth-child(3n+3){transform:rotate(-1deg)}
.mdrg-t-tilted-grid .mdrg-item:hover{z-index:5;transform:rotate(0) scale(1.04)}

/* ---------- 26. Overlap row ---------- */
.mdrg-t-overlap-row{--mdrg-ar:3/4;--w:clamp(120px,20vw,230px)}
.mdrg-t-overlap-row .mdrg-items{display:flex;flex-wrap:wrap;justify-content:center;gap:0;padding:24px 20px}
.mdrg-t-overlap-row .mdrg-item{flex:0 0 auto;width:var(--w);margin-left:calc(var(--w)*-.22);border:5px solid #fff;border-radius:calc(var(--mdrg-radius) + 4px);background:#fff;box-shadow:0 16px 32px -16px rgba(15,23,42,.45);transition:transform .35s,margin .35s}
.mdrg-t-overlap-row .mdrg-item:first-child{margin-left:0}
.mdrg-t-overlap-row .mdrg-item:hover{z-index:6;transform:translateY(-14px) scale(1.05)}
@media (hover:hover){.mdrg-t-overlap-row .mdrg-items:hover .mdrg-item{margin-left:6px}.mdrg-t-overlap-row .mdrg-items:hover .mdrg-item:first-child{margin-left:0}}
@media (max-width:600px){.mdrg-t-overlap-row .mdrg-item{margin-left:calc(var(--w)*-.12)}}

/* ---------- Lightbox ---------- */
.mdrg-lb{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;background:rgba(8,12,20,.93);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.mdrg-lb.on{opacity:1;visibility:visible}
.mdrg-lb figure{display:flex;flex-direction:column;align-items:center;max-width:92vw;margin:0}
.mdrg-lb img{display:block;max-width:92vw;max-height:78vh;border-radius:8px;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.mdrg-lb figcaption{max-width:70ch;margin-top:14px;color:#fff;font-size:15px;text-align:center}
.mdrg-lb figcaption b{display:block;font-size:17px}
.mdrg-lb figcaption span{display:block;margin-top:2px;opacity:.8}
.mdrg-lb button{position:absolute;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;transition:background .2s}
.mdrg-lb button:hover{background:rgba(255,255,255,.28)}
.mdrg-lb .x{top:18px;right:18px}
.mdrg-lb .p{top:50%;left:18px;margin-top:-23px}
.mdrg-lb .n{top:50%;right:18px;margin-top:-23px}
.mdrg-lb.single .p,.mdrg-lb.single .n{display:none}
@media (max-width:600px){.mdrg-lb .p{left:8px}.mdrg-lb .n{right:8px}}