/* Media cards on the Selection page: {% media <type> <id> %} (scripts/media-card.js) */
.media-card {display:flex;align-items:flex-start;gap:18px;max-width:560px;margin:1.4em auto 1em;padding:14px;background:#fff;border:1px solid rgba(102,128,153,0.14);border-radius:8px;box-shadow:0 2px 10px rgba(35,35,35,0.05);line-height:1.6;text-align:left;box-sizing:border-box;}
.media-card .mc-art {flex:0 0 96px;width:96px;}
.media-card .mc-art img {display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:4px;background:#f3f1ee;box-shadow:0 1px 4px rgba(0,0,0,0.18);}
.media-card-music .mc-art {flex-basis:112px;width:112px;}
.media-card-music .mc-art img {aspect-ratio:1/1;}
.media-card .mc-body {flex:1 1 auto;min-width:0;}
.media-card .mc-kind {font-size:12px;letter-spacing:.08em;color:#999;}
.media-card .mc-name {margin:2px 0 0;font-size:18px;font-weight:500;line-height:1.35;overflow-wrap:anywhere;}
.content .media-card .mc-title {color:#232323;}
.content .media-card .mc-title:hover {color:#1980e6;}
.media-card .mc-orig {font-size:13px;color:#777;overflow-wrap:anywhere;}
.media-card .mc-by {margin-top:4px;font-size:13px;color:#555;overflow-wrap:anywhere;}
.media-card .mc-by span {color:#999;margin-right:2px;}
.media-card .mc-score {display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;margin-top:6px;font-size:13px;color:#555;}
.media-card .mc-score b {font-weight:600;color:#e09015;}
.media-card .mc-score small {font-size:12px;color:#999;}
.media-card .mc-stars {position:relative;display:inline-block;font-size:14px;line-height:1;letter-spacing:1px;color:#e4e4e4;}
.media-card .mc-stars:before {content:"\2605\2605\2605\2605\2605";}
.media-card .mc-stars:after {content:"\2605\2605\2605\2605\2605";position:absolute;left:0;top:0;width:var(--mc-fill,0%);overflow:hidden;white-space:nowrap;color:#f5a623;}
.media-card .mc-links {margin-top:8px;font-size:12px;}
.content .media-card .mc-link {display:inline-block;margin-right:8px;padding:0 8px;border:1px solid rgba(25,128,230,0.3);border-radius:10px;line-height:20px;color:#1980e6;}
.content .media-card .mc-link:hover {background:rgba(25,128,230,0.06);}
.media-card-missing {border-style:dashed;}
@media screen and (max-width:600px) {
  .media-card {gap:12px;padding:12px;margin:1.2em 0 .9em;}
  .media-card .mc-art {flex-basis:76px;width:76px;}
  .media-card-music .mc-art {flex-basis:88px;width:88px;}
  .media-card .mc-name {font-size:16px;}
}