.archiveFolders,
.archiveGrid {


display:grid;

grid-template-columns:
    repeat(auto-fill,minmax(240px,1fr));

gap:20px;

padding:20px;


}

.archiveFolder {


display:flex;
flex-direction:column;

align-items:center;

background:#111827;

border:1px solid #00ff99;

border-radius:10px;

padding:15px;

text-decoration:none;

color:#e5e7eb;

overflow:hidden;


}

.archiveFolder:hover {


transform:scale(1.02);


}

.archiveFolder strong {


margin-top:10px;

color:#00ff99;


}

.folderThumb {


width:180px !important;
height:120px !important;

min-width:180px !important;
max-width:180px !important;

min-height:120px !important;
max-height:120px !important;

object-fit:cover !important;

display:block;

border:1px solid #00ff99;

border-radius:5px;


}

.noThumb {


width:180px;
height:120px;

display:flex;

align-items:center;
justify-content:center;

font-size:64px;

border:1px solid #00ff99;

border-radius:5px;


}

.mediaCard {


background:#111827;

border:1px solid #00ff99;

border-radius:10px;

padding:10px;


}

.mediaCard img {


width:100%;

height:180px;

object-fit:cover;

border-radius:5px;


}

.mediaCard video,
.mediaCard audio {


width:100%;


}

.mediaCard p {


margin-top:10px;

word-break:break-word;


}

pre {


color:#00ff99;


}