/* Miniaturas quadradas com transparencia visivel. */
.norama-media-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(min(100%,148px),1fr));
 gap:10px;
 align-items:start;
 min-width:0;
 width:100%;
}
.media-library-grid>.norama-media-grid{grid-column:1/-1}
.norama-media-tile{
 display:flex;
 flex-direction:column;
 min-width:0;
 margin:0;
 overflow:hidden;
 border:1px solid var(--border);
 border-radius:0;
 background:var(--surface);
}
.norama-media-tile-visual{
 position:relative;
 aspect-ratio:1/1;
 width:100%;
 display:grid;
 place-items:center;
 overflow:hidden;
 background-color:#d5d5d5;
 background-image:
  linear-gradient(45deg,#aeb0b2 25%,transparent 25%),
  linear-gradient(-45deg,#aeb0b2 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,#aeb0b2 75%),
  linear-gradient(-45deg,transparent 75%,#aeb0b2 75%);
 background-position:0 0,0 10px,10px -10px,-10px 0;
 background-size:20px 20px;
}
.norama-media-tile-visual>img{
 display:block;
 position:relative;
 z-index:1;
 width:100%;
 height:100%;
 object-fit:contain;
}
.norama-media-audio,.norama-media-missing{
 color:#22282d;
 background:#ffffffc4;
 padding:5px 12px;
 font-size:36px;
 font-weight:700;
}
.norama-media-tile-body{
 padding:8px;
 display:flex;
 flex-direction:column;
 gap:7px;
 min-width:0;
}
.norama-media-tile-title{
 display:block;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 font-size:12px;
 line-height:1.35;
}
.norama-media-tile-body>.button{
 width:100%;
 min-height:36px;
 white-space:normal;
}
.norama-media-select{
 position:absolute;
 inset:0;
 z-index:3;
 cursor:pointer;
}
.norama-media-select>input{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 padding:0;
 margin:0;
 opacity:0;
 cursor:pointer;
}
.norama-media-select-mark{
 position:absolute;
 right:6px;
 top:6px;
 display:grid;
 place-items:center;
 width:27px;
 height:27px;
 border:2px solid #fff;
 outline:1px solid #333;
 background:#17191cbd;
 color:transparent;
 font-size:18px;
 font-weight:800;
}
.norama-media-select>input:checked+.norama-media-select-mark{
 background:var(--neutral-9);
 color:var(--neutral-1);
 border-color:var(--neutral-9);
}
.norama-media-select>input:focus-visible+.norama-media-select-mark{
 outline:3px solid #fff;
 outline-offset:2px;
}
.norama-media-tile:has(.norama-media-select>input:checked){
 outline:3px solid var(--neutral-9);
 outline-offset:-3px;
}
@media(max-width:480px){
 .norama-media-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
 }
}