/* One thumbnail-card structure. Lists retain their separate shared row layout. */
body .gallery:not([data-thumbnail-size=list]) :is(.card,.album-tile),
body :is(.studio-library:not([data-size=list]),.studio-recent-list:not([data-size=list])) .studio-media-card{
 display:grid;align-items:stretch;justify-items:stretch;grid-template-columns:minmax(0,1fr);grid-template-rows:2.2rem minmax(0,1fr) 2.2rem;gap:0;padding:0;aspect-ratio:1;min-width:0;min-height:0;border-radius:10px;overflow:hidden;text-align:left
}
body .gallery:not([data-thumbnail-size=list]) :is(.card,.album-tile)>.card-top,
body :is(.studio-library:not([data-size=list]),.studio-recent-list:not([data-size=list])) .studio-media-card>.media-card-top{
 grid-row:1;display:flex;align-items:center;justify-content:flex-start;gap:6px;min-width:0;min-height:0;padding:5px 8px;border-bottom:1px solid #ffffff0d;background:rgba(0,0,0,.15)
}
body :is(.studio-library:not([data-size=list]),.studio-recent-list:not([data-size=list])) .media-card-top>.studio-browser-check{position:relative;inset:auto;margin:0;flex:none}
body :is(.studio-library:not([data-size=list]),.studio-recent-list:not([data-size=list])) .studio-media-card>.media-card-preview{
 grid-row:2;display:block;width:100%;height:100%;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;aspect-ratio:auto
}
body :is(.studio-library:not([data-size=list]),.studio-recent-list:not([data-size=list])) .media-card-preview>img{display:block;width:100%;height:100%;max-width:none;min-height:0;object-fit:contain}
body :is(.studio-library:not([data-size=list]),.studio-recent-list:not([data-size=list])) .studio-media-card>.album-visual{display:flex;align-items:center;justify-content:center}
body .gallery:not([data-thumbnail-size=list]) :is(.card,.album-tile)>:is(.file-name,.album-name-row),
body :is(.studio-library:not([data-size=list]),.studio-recent-list:not([data-size=list])) .studio-media-card>.media-card-bottom{
 grid-row:3;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;align-self:stretch;position:relative;min-width:0;min-height:0;height:100%;margin:0;border-top:1px solid #ffffff0d;background:rgba(0,0,0,.15)
}
body :is(.studio-library:not([data-size=list]),.studio-recent-list:not([data-size=list])) .studio-media-card>.media-card-bottom{padding:8px}
body :is(.studio-library:not([data-size=list]),.studio-recent-list:not([data-size=list])) .media-card-bottom>strong{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;font-weight:400}
body :is(.studio-library:not([data-size=list]),.studio-recent-list:not([data-size=list])) .studio-media-card>.album-browser-info{display:none}
/* Slot wrappers disappear in lists, so the existing shared columns stay intact. */
body .studio-library[data-size=list] .studio-media-card>:is(.media-card-top,.media-card-bottom){display:contents}
@media(max-width:700px){
 body .gallery:not([data-thumbnail-size=list]) :is(.card,.album-tile){grid-template-rows:40px minmax(0,1fr) 44px}
 body .gallery:is([data-thumbnail-size=small],[data-thumbnail-size=xsmall]) :is(.card,.album-tile){grid-template-rows:2rem minmax(0,1fr) 1.5rem}
 body .gallery:not([data-thumbnail-size=list]) :is(.card,.album-tile)>.card-top{padding-top:3px;padding-bottom:3px}
 body .gallery:not([data-thumbnail-size=list]) :is(.card,.album-tile)>:is(.file-name,.album-name-row){padding-top:5px;padding-bottom:5px}
}

/* Shared folder artwork and previews for gallery and Studio albums. */
.album-folder{position:relative;display:block;width:55%;height:auto;aspect-ratio:120/85;margin-top:0;max-width:7.5rem;flex:none;border-radius:5px;background:linear-gradient(135deg,#f3a039,color-mix(in srgb,#f06438 80%,#000))}
.album-folder:before{content:"";position:absolute;top:-11.8%;left:0;width:40%;height:21.2%;background:#f3a039;border-radius:5px 5px 0 0}
body :is(.gallery[data-thumbnail-size],.studio-library[data-size]) .album-folder img{position:absolute;width:44.2%;height:62.4%;object-fit:cover;background:repeating-conic-gradient(#333 0% 25%,#444 0% 50%) 0 0/.5rem .5rem;border:2px solid #eee;left:26.7%;top:18.8%;transform:rotate(-12deg)}
body :is(.gallery[data-thumbnail-size],.studio-library[data-size]) .album-folder img:nth-child(2){transform:rotate(5deg);left:35.8%}
body :is(.gallery[data-thumbnail-size],.studio-library[data-size]) .album-folder img:nth-child(3){transform:rotate(15deg);left:44.2%}
body :is(.gallery[data-thumbnail-size],.studio-library[data-size]) .album-folder img.album-cover-image{width:62%;height:70%;left:19%;top:15%;transform:none;object-fit:cover}
body :is(.gallery[data-thumbnail-size=list],.studio-library[data-size=list]) .album-folder{width:3rem;height:2.4rem;max-width:none;margin:0}
body :is(.gallery[data-thumbnail-size],.studio-library[data-size]) :is(.grid,.album-grid,.studio-library-grid){grid-template-columns:repeat(5,minmax(0,1fr))}
body :is(.gallery[data-thumbnail-size=small],.studio-library[data-size=small]) :is(.grid,.album-grid,.studio-library-grid){grid-template-columns:repeat(7,minmax(0,1fr))}
body :is(.gallery[data-thumbnail-size=large],.studio-library[data-size=large]) :is(.grid,.album-grid,.studio-library-grid){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:701px) and (max-width:1279px){body :is(.gallery[data-thumbnail-size],.studio-library[data-size]) :is(.grid,.album-grid,.studio-library-grid){grid-template-columns:repeat(4,minmax(0,1fr))}
body :is(.gallery[data-thumbnail-size=small],.studio-library[data-size=small]) :is(.grid,.album-grid,.studio-library-grid){grid-template-columns:repeat(6,minmax(0,1fr))}
body :is(.gallery[data-thumbnail-size=large],.studio-library[data-size=large]) :is(.grid,.album-grid,.studio-library-grid){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:701px) and (max-width:1119px){body :is(.gallery[data-thumbnail-size=small],.studio-library[data-size=small]) :is(.grid,.album-grid,.studio-library-grid){grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(min-width:701px) and (max-width:1039px){body :is(.gallery[data-thumbnail-size],.studio-library[data-size]) :is(.grid,.album-grid,.studio-library-grid){grid-template-columns:repeat(3,minmax(0,1fr))}
body :is(.gallery[data-thumbnail-size=small],.studio-library[data-size=small]) :is(.grid,.album-grid,.studio-library-grid){grid-template-columns:repeat(4,minmax(0,1fr))}
body :is(.gallery[data-thumbnail-size=large],.studio-library[data-size=large]) :is(.grid,.album-grid,.studio-library-grid){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:701px) and (max-width:849px){body :is(.gallery[data-thumbnail-size],.studio-library[data-size]) :is(.grid,.album-grid,.studio-library-grid){grid-template-columns:repeat(2,minmax(0,1fr))}
body :is(.gallery[data-thumbnail-size=small],.studio-library[data-size=small]) :is(.grid,.album-grid,.studio-library-grid){grid-template-columns:repeat(3,minmax(0,1fr))}
body :is(.gallery[data-thumbnail-size=large],.studio-library[data-size=large]) :is(.grid,.album-grid,.studio-library-grid){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){body :is(.gallery[data-thumbnail-size],.studio-library[data-size]) :is(.grid,.album-grid,.studio-library-grid){grid-template-columns:repeat(2,minmax(0,1fr))}
body :is(.gallery[data-thumbnail-size=small],.studio-library[data-size=small]) :is(.grid,.album-grid,.studio-library-grid){grid-template-columns:repeat(3,minmax(0,1fr))}
body :is(.gallery[data-thumbnail-size=large],.studio-library[data-size=large]) :is(.grid,.album-grid,.studio-library-grid){grid-template-columns:repeat(1,minmax(0,1fr))}
}
body :is(.gallery[data-thumbnail-size=list],.studio-library[data-size=list]) :is(.grid,.album-grid,.studio-library-grid){grid-template-columns:repeat(1,minmax(0,1fr))}

/* Extra-small thumbnails share one responsive column count across all overviews. */
body :is(.gallery[data-thumbnail-size=xsmall],.studio-library[data-size=xsmall],.studio-recent-list[data-size=xsmall]){--thumbnail-columns:9}
body :is(.gallery[data-thumbnail-size=xsmall],.studio-library[data-size=xsmall]) :is(.grid,.album-grid,.studio-library-grid),body .studio-recent-list[data-size=xsmall]{grid-template-columns:repeat(var(--thumbnail-columns),minmax(0,1fr))}
@media(max-width:79.9rem){body :is(.gallery[data-thumbnail-size=xsmall],.studio-library[data-size=xsmall],.studio-recent-list[data-size=xsmall]){--thumbnail-columns:8}}
@media(max-width:69.9rem){body :is(.gallery[data-thumbnail-size=xsmall],.studio-library[data-size=xsmall],.studio-recent-list[data-size=xsmall]){--thumbnail-columns:7}}
@media(max-width:64.9rem){body :is(.gallery[data-thumbnail-size=xsmall],.studio-library[data-size=xsmall],.studio-recent-list[data-size=xsmall]){--thumbnail-columns:6}}
@media(max-width:53rem){body :is(.gallery[data-thumbnail-size=xsmall],.studio-library[data-size=xsmall],.studio-recent-list[data-size=xsmall]){--thumbnail-columns:5}}
@media(max-width:43.8rem){body :is(.gallery[data-thumbnail-size=xsmall],.studio-library[data-size=xsmall],.studio-recent-list[data-size=xsmall]){--thumbnail-columns:3}}

/* The image element follows its canvas; the surrounding card keeps its ordinary background. */
body :is(.gallery,.gallery[data-thumbnail-size],.studio-library[data-size],.studio-recent-list[data-size]) :is(.card,.studio-media-card) :is(.preview,.media-card-preview,.project-preview){container-type:size;display:flex;align-items:center;justify-content:center;background-image:none}
body :is(.gallery,.gallery[data-thumbnail-size],.studio-library[data-size],.studio-recent-list[data-size]) :is(.card,.studio-media-card) :is(.preview,.media-card-preview,.project-preview)>img[data-canvas-thumbnail]{display:block;flex:none;width:min(100cqw,calc(100cqh * var(--thumbnail-width) / var(--thumbnail-height)));height:min(100cqh,calc(100cqw * var(--thumbnail-height) / var(--thumbnail-width)));min-width:0;min-height:0;max-width:100%;max-height:100%;margin:0;padding:0;object-fit:contain;background:repeating-conic-gradient(#333 0% 25%,#444 0% 50%) 0 0/.5rem .5rem}
body .studio-panel-group .layer-row:not(.adjustment-layer) img.layer-thumb{min-height:0}