.media-picker-actions{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
.media-picker-actions button{min-height:48px}
.media-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:13px 0;max-height:42dvh;overflow:auto;overscroll-behavior:contain}
.media-picker-grid>.empty{grid-column:1/-1}
.media-picker-item{position:relative;min-width:0;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:13px;background:#f6f8fb}
.media-picker-item img,.media-picker-item video{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#e8edf3}
.media-picker-item button{position:absolute;top:5px;right:5px;display:grid;place-items:center;width:27px;height:27px;padding:0;border:0;border-radius:50%;background:rgba(22,50,79,.85);color:#fff;font-size:22px;line-height:1}
.media-picker-item small{display:block;overflow:hidden;padding:5px 6px;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:800}
.media-picker-play{position:absolute;top:calc(50% - 16px);left:calc(50% - 16px);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(8,22,50,.72);color:#fff;font-size:14px}
.media-picker-footer{display:flex;align-items:center;gap:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;font-weight:800}
.media-picker-footer>span{flex:1;min-width:0}
.media-picker-footer .primary{width:auto;min-width:130px}

@media(max-width:390px){
  .media-picker-actions{grid-template-columns:1fr}
  .media-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .media-picker-footer{align-items:stretch;flex-direction:column}
  .media-picker-footer .primary{width:100%}
}
@media(min-width:600px){
  .media-picker-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:48dvh}
  .media-picker-actions{grid-template-columns:1.5fr 1fr 1fr}
}
@media(min-width:1024px){
  .media-picker-grid{grid-template-columns:repeat(5,minmax(0,1fr));max-height:52dvh}
}