main.article {
    div.header {
        position: relative;

        &::before {
            content: ' ';
            background-image: var(--image, url("../../images/backgrounds/muted-12e98d9008f203abc8c6caba469ec253.png"));
            background-size: cover;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;    
            z-index: -1;
            filter: blur(3px);
        }
        
        img {
            &:not(.contain) {
                max-height: calc(65vh - var(--headerHeight));
                aspect-ratio: 16/9;
                width: 100%;
                object-fit: cover;
            }

            &.contain {
                display: block;
                margin: 0 auto;
                padding-top: 18px;
                padding-bottom: 22px;
            }
        }

        &.short {
            img {
                aspect-ratio: unset;
                height: 20vh;
            }
        }
    }

    div.headline, div.meta {
        background-color: black;
        color: white;
        padding: 16px;

        &.headline {
            padding-bottom: 0;
        }

        &.meta {
            padding-top: 0;
            text-align: right;
            font-size: 0.9rem;
        }

        &:has(.shorts-player) {
            position: relative;

            .shorts-player {
                --buttonSize: 80px;
                --seekerSize: 20px;

                audio {
                    display: none;
                }

                button.play {
                    width: var(--buttonSize);
                    height: var(--buttonSize);
                    border-radius: 50%;
                    display: flex;
                    place-content: center;
                    border: none;

                    position: absolute;
                    right: 16px;
                    top: calc(0px - (var(--buttonSize) / 2) - (var(--seekerSize) / 2));
                    z-index: 1;

                    svg {
                        width: 50px;
                        height: 50px;
                        flex-shrink: 0;
                    }
                }

                div.progress {
                    width: 100%;
                    background-color: silver;
                    height: var(--seekerSize);
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: calc(0px - var(--seekerSize));

                    [data-progress] {
                        height: 100%;
                        background-color: #84754E;
                        width: 0px;
                    }
                }
            }   
        }
    }



    div.content {
        background-color: white;
        padding: 44px;
        font-size: 1.1rem;

        p {
            margin-bottom: 18px;
        }

        img {
            margin: 0 auto;
            display: block;
        }
    }
}