/* ===================== Cover Base ===================== */

.__PFX__-dm-cover {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.__PFX__-dm-cover-img {
    display: block;
    width: 100%;
    height: auto;
}

.__PFX__-dm-cover-bg {
    width: 100%;
    aspect-ratio: 2 / 3;
    background-size: cover;
    background-position: center;
}

/* ===================== Overlays ===================== */

.__PFX__-dm-cover-badge,
.__PFX__-dm-cover-score,
.__PFX__-dm-cover-tag,
.__PFX__-dm-cover-year,
.__PFX__-dm-cover-free,
.__PFX__-dm-cover-top {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 6px;
    font-size: 12px;
    background: rgba(0,0,0,.6);
    color: #fff;
    border-radius: 3px;
}

.__PFX__-dm-cover-score {
    top: auto;
    bottom: 8px;
    left: 8px;
}

.__PFX__-dm-cover-remark {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 12px;
    padding: 4px 6px;
    background: rgba(0,0,0,.5);
    color: #fff;
}

.__PFX__-dm-cover-play {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
}

.__PFX__-dm-cover-play::after {
    content: "▶";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    color: #fff;
}

/* ===================== Variant Differences ===================== */

.__PFX__-dm-cover.v3,
.__PFX__-dm-cover.v6,
.__PFX__-dm-cover.v10,
.__PFX__-dm-cover.v11,
.__PFX__-dm-cover.v14 {
    aspect-ratio: 2 / 3;
}

.__PFX__-dm-cover.v8 {
    text-align: center;
}

.__PFX__-dm-cover.v16 .__PFX__-dm-cover-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0),
        rgba(0,0,0,.6)
    );
}

.__PFX__-dm-cover.v18 {
    aspect-ratio: 2 / 3;
    background-size: cover;
    background-position: center;
}