/* Media List */
ul.medialist {list-style:none; padding:0; margin:0;}
ul.medialist li.mediaitem {padding:var(--cellgap);}


/* Media List Link */
ul.medialist li.mediaitem a.medialink {display:block; position:relative; width:100%; overflow:hidden; border-radius:var(--mediacorner);}
ul.medialist li.mediaitem a.medialink {color:inherit; text-decoration:none;}
/* ul.medialist li.mediaitem a.medialink:hover {} */
/* ul.medialist li.mediaitem:hover a.medialink {scale:1.5; transition:.5s;} */


/* Media List Link: Preview */
ul.medialist li.mediaitem a.medialink div.preview {/* background-color:lawngreen; */ /* position:relative; */ padding-bottom:var(--thumbnailaspectratio);}
/* ul.medialist li.mediaitem a.medialink div.preview {} */
ul.medialist li.mediaitem a.medialink div.preview img.thumbnail,
ul.medialist li.mediaitem a.medialink div.preview video.sneakpeek,
ul.medialist li.mediaitem a.medialink div.preview iframe.sneakpeek {position:absolute; inset:0; height:100%; width:100%; object-fit:cover; transition:.375s; z-index:1; border:0 none;}
ul.medialist li.mediaitem a.medialink div.preview iframe.sneakpeek {scale:.125; height:800%; width:800%; transform:translate(-350%,-350%);}
ul.medialist li.mediaitem a.medialink div.preview img.thumbnail {opacity:1; visibility:visible;}
ul.medialist li.mediaitem a.medialink div.preview video.sneakpeek {opacity:0; visibility:hidden;}
ul.medialist li.mediaitem a.medialink div.preview iframe.sneakpeek {opacity:0; visibility:hidden;}
ul.medialist li.mediaitem a.medialink div.preview.peek img.thumbnail {opacity:0; visibility:hidden;}
ul.medialist li.mediaitem a.medialink div.preview.peek video.sneakpeek {opacity:1; visibility:visible;}
ul.medialist li.mediaitem a.medialink div.preview.peek iframe.sneakpeek {opacity:1; visibility:visible;}


/* Media List Link: Preview Tag */
ul.medialist li.mediaitem a.medialink div.preview::after {position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:3;}
ul.medialist li.mediaitem a.medialink div.preview::after {background-color:red; color:white; font-size:1.125rem; font-weight:500; padding:.25rem .5rem; border-radius:0 0 .25rem .25rem;}
ul.medialist li.mediaitem a.medialink div.preview::after {white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
ul.medialist li.mediaitem.f a.medialink div.preview::after {content:'Featured';}
ul.medialist li.mediaitem.r a.medialink div.preview::after {content:'Recently Added';}


/* Media List Link: Badge */
ul.medialist li.mediaitem a.medialink div.mediabadge {position:absolute; inset:0; height:100%; width:100%;}
ul.medialist li.mediaitem a.medialink div.mediabadge {position:relative;}
ul.medialist li.mediaitem a.medialink div.mediabadge {display:flex; flex-direction:column; justify-content:space-between; gap:.5em; padding:.75em; padding-bottom:.625em;}
ul.medialist li.mediaitem a.medialink div.mediabadge {background-color:var(--ltblack); background-image:linear-gradient(transparent,black); z-index:-1;}
ul.medialist li.mediaitem a.medialink div.mediabadge {background:var(--medialinkbadgebackcolor); color:var(--forecolor); /* opacity:.625; */ z-index:2;}
ul.medialist li.mediaitem a.medialink div.mediabadge {font-size:1.5rem; font-size:1.375rem; /* font-size:1vmax; */ /* text-align:center; */}
ul.medialist li.mediaitem a.medialink div.mediabadge div.top {display:flex; flex-direction:column;}
ul.medialist li.mediaitem a.medialink div.mediabadge div.top span.medialabel {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* ul.medialist li.mediaitem a.medialink div.mediabadge div.top span.medialabel {top:auto; padding:10%;} */
/* ul.medialist li.mediaitem a.medialink div.mediabadge div.top span.medialabel {bottom:auto; right:auto;} */
/* ul.medialist li.mediaitem a.medialink div.mediabadge div.top span.medialabel {line-height:1.25;} */
/* ul.medialist li.mediaitem a.medialink div.mediabadge div.top span.medialabel:empty {} */
ul.medialist li.mediaitem a.medialink div.mediabadge div.top span.medialabel:empty::after {background-color:gainsboro; content:''; display:block; opacity:.25; height:.75em; width:7em; border-radius:10em;}
ul.medialist li.mediaitem a.medialink div.mediabadge div.top span.mediahead {font-size:1em; font-weight:400; /* text-transform:uppercase; */}
ul.medialist li.mediaitem a.medialink div.mediabadge div.top span.mediasubhead {color:var(--forecolor1); font-size:.625em; font-size:.75em; font-weight:400; text-transform:uppercase;}
ul.medialist li.mediaitem a.medialink div.mediabadge div.top span.mediasubhead:empty {margin-top:.125em;}
/* ul.medialist li.mediaitem a.medialink div.mediabadge div.top span.mediasubhead {position:absolute; inset:0;} */
ul.medialist li.mediaitem a.medialink div.mediabadge div.bottom {color:var(--forecolor1); font-size:.75em; /* font-size:.625em; */}
/* ul.medialist li.mediaitem a.medialink div.mediabadge div.bottom::after {content:'⋅⋅⋅';} */
ul.medialist li.mediaitem a.medialink div.mediabadge div.bottom {display:flex; flex-direction:row; align-items:center; justify-content:space-between;}
/* ul.medialist li.mediaitem a.medialink div.mediabadge div.bottom {display:none;} */
ul.medialist li.mediaitem a.medialink div.mediabadge div.bottom div.mediarating {display:flex; flex-direction:row; align-items:center; gap:.25em;}
ul.medialist li.mediaitem a.medialink div.mediabadge div.bottom div.mediarating svg.star {color:var(--starcolor); font-size:1.25em;}
ul.medialist li.mediaitem a.medialink div.mediabadge div.bottom div.mediarating svg.star.on {color:var(--starcoloron);}
ul.medialist li.mediaitem a.medialink div.mediabadge div.bottom div.mediacounter {display:flex; flex-direction:row; align-items:center; gap:.25em;}
ul.medialist li.mediaitem a.medialink div.mediabadge div.bottom div.mediacounter svg.icon {color:var(--forecolor); font-size:1.5em;}
ul.medialist li.mediaitem a.medialink div.mediabadge div.bottom div.mediacounter span.caption {font-weight:400;}