/*
    This file is part of jellything (https://codeberg.org/metamuffin/jellything)
    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
    Copyright (C) 2023 metamuffin <metamuffin.org>
    Copyright (C) 2023 tpart
*/
.backdrop {
    width: calc(100% + 2 * var(--main-side-margin));
    height: calc(var(--backdrop-height) + 5em);
    margin-left: calc(-1 * var(--main-side-margin));
    margin-right: calc(-1 * var(--main-side-margin));
    margin-top: calc(-1 * var(--bar-height));
    margin-bottom: -5em;
    -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 1),
        transparent calc(var(--backdrop-height) + 5em)
    );
    mask-image: linear-gradient(
        rgba(0, 0, 0, 1),
        transparent calc(var(--backdrop-height) + 5em)
    );
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
    pointer-events: none;
    object-fit: cover;
    object-position: center;
}
.page.node {
    position: relative;
    width: 100%;
}
.page.node .bigposter {
    width: max(8em, 25%);
    float: left;
    margin: 3em;
    margin-top: -1em;
}
.page.node .bigposter img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.page.node .title h1 {
    display: inline;
    margin-right: 1em;
}
.page.node .title .play {
    display: inline;
    font-stretch: 200%;
}
.page.node .title .play::before {
    content: "▶";
}

.props p {
    margin: 0.4em;
    font-size: small;
    font-weight: bolder;
    display: inline-block;
    padding: 0.2em;
    background: #5a5a5a85;
    border-radius: 4px;
}