.wp-block-gallery,.cyber-gallery-container{gap:1rem;width:100%;margin:2rem 0;display:grid;&.columns-2{grid-template-columns:repeat(2,1fr)}&.columns-3{grid-template-columns:repeat(2,1fr);@media (width>=640px){grid-template-columns:repeat(3,1fr)}}&.columns-4{grid-template-columns:repeat(2,1fr);@media (width>=640px){grid-template-columns:repeat(4,1fr)}}&.columns-6{grid-template-columns:repeat(2,1fr);@media (width>=768px){grid-template-columns:repeat(3,1fr)}@media (width>=1024px){grid-template-columns:repeat(6,1fr)}}& .gallery-item-frame{cursor:zoom-in;background:var(--darker);border:1px solid #d5100138;padding:5px;transition:border-color .28s cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1),transform .28s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #d510010d,0 4px 18px #00000073;& .capture-viewport img{filter:grayscale(15%)contrast(108%);transition:filter .28s,transform .45s cubic-bezier(.25,1,.5,1)}& img,& .capture-viewport picture,& .capture-viewport img{aspect-ratio:unset;max-height:none}& .capture-frame .capture-viewport img{max-height:none}&:before{content:"";z-index:2;pointer-events:none;opacity:.75;background-image:repeating-linear-gradient(#0000,#0000 2px,#d5100108 2px 4px);transition:opacity .28s;position:absolute;inset:0}& .corner{color:var(--secondary-yellow);font-size:.65rem;font-family:var(--font-mono);pointer-events:none;z-index:4;opacity:.65;line-height:1;transition:color .28s,text-shadow .28s,opacity .28s;position:absolute;&.top-left{top:4px;left:4px}&.top-right{top:4px;right:4px}&.bottom-left{bottom:4px;left:4px}&.bottom-right{bottom:4px;right:4px}}& .gallery-label{z-index:4;font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;text-align:center;color:#ffebd6bf;pointer-events:none;background:linear-gradient(#0000,#050508eb);padding:1.4rem .35rem .35rem;font-size:.52rem;position:absolute;bottom:0;left:0;right:0}& .gallery-expand{z-index:3;opacity:0;pointer-events:none;background:#0505088c;flex-direction:column;justify-content:center;align-items:center;gap:.35rem;transition:opacity .28s;display:flex;position:absolute;inset:0}& .gallery-expand-icon{font-family:var(--font-mono);color:var(--secondary-yellow);text-shadow:0 0 10px #ffc73473;font-size:1.25rem;line-height:1}& .gallery-expand-text{font-family:var(--font-mono);letter-spacing:.2em;color:#ffebd6d9;font-size:.55rem}&:hover,&:focus-visible{border-color:#d51001a6;outline:none;transform:translateY(-2px);box-shadow:inset 0 0 0 1px #d510011f,0 0 22px #d510012e,0 8px 24px #00000080;& .capture-viewport img,& img{filter:grayscale(0%)contrast();transform:scale(1.03)}& .corner{color:var(--secondary-yellow);opacity:1;text-shadow:0 0 8px #ffc73473}& .gallery-expand{opacity:1}&:before{opacity:.45}}}}body.lightbox-open{overflow:hidden}.cyber-gallery-container[data-popup=portfolio],.cyber-gallery-container--portfolio{align-items:stretch;gap:.6rem;width:100%;margin:0}.cyber-gallery-container[data-popup=portfolio] .gallery-item-frame,.cyber-gallery-container--portfolio .gallery-item-frame{flex-direction:column;height:100%;min-height:0;padding:4px;display:flex}.cyber-gallery-container[data-popup=portfolio] .gallery-item-frame .capture-frame,.cyber-gallery-container--portfolio .gallery-item-frame .capture-frame{width:100%}.gallery-item-frame--media .media-frame{width:100%;height:var(--capture-thumb-height,clamp(7.75rem, 14vw, 10rem));min-height:var(--capture-thumb-height,clamp(7.75rem, 14vw, 10rem));max-height:var(--capture-thumb-height,clamp(7.75rem, 14vw, 10rem));contain:layout paint;flex:0 0 var(--capture-thumb-height,clamp(7.75rem, 14vw, 10rem));background:#05050af2;border:1px solid #d510011f;position:relative;overflow:hidden}.gallery-item-frame--media .media-viewport{position:absolute;inset:0;overflow:hidden}.gallery-item-frame--media .media-viewport picture{width:100%;height:100%;display:block;overflow:hidden}.gallery-item-frame--media .media-viewport img{object-fit:cover;object-position:top center;transform-origin:top;width:100%;height:100%;display:block}.gallery-item-frame--media .media-play-glyph{z-index:2;color:var(--secondary-yellow);text-shadow:0 0 12px #ffc7348c;pointer-events:none;opacity:.85;font-size:1.5rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.gallery-item-frame--media:hover .media-viewport img,.gallery-item-frame--media:focus-visible .media-viewport img{filter:grayscale(0%)contrast();transform:scale(1.03)}
