.story{

    figure{
        margin:0;
        padding:0;
        >picture>img{
            width: 100%;
            height: auto;
        }
    }

    >main{
        figure {
            padding-top: 2.5rem;
            margin: 0 auto;
            &.empty{
                position: relative;
                min-height:66vh;
                background:#eee;
            }

            img,
            video{
                width:100%;
                height:auto;
                display: block;
                max-height: 100vh;
                object-fit: cover;
            }
        }

        header {
            padding-top: 2.5rem;
            display: flex;
            flex-flow: column;
            gap: var(--gap);
        }

        h1 {
            font-size: 2.666667em;
            line-height:1;
        }
    }

    >article {
        padding-top: 0;
    }

    .story-head{
        order:1;
    }

    .story-details {
        order:3;
        columns:2;
        column-gap: var(--gap);
        width: 100%;
        >p{
            margin-bottom:1em;
            &:last-child{
                margin-bottom:0;
            }
        }

        @media screen and (max-width: 600px) {
            columns:1;
        }
    }

    .story-facts{
        order:2;

        dt{
            text-transform: uppercase;
        }
        dd{
            margin:0;
        }
        ul{
            color:var(--color_accent);
        }
    }
}

.story-block{
    grid-column-start: 1;
    grid-column-end: 7;
    width:100%;
    margin-top:6rem;
    position:relative;
    h2,
    p{
        position:relative;
        font-size: 1rem;
    }

    h2{
        font-size:1.875rem;
        text-align:center;
    }

    p{
        margin-bottom:1em;
        &:last-child{
            margin-bottom:0;
        }
    }

    figure{
        position:relative;
        margin:0;
    }

    figure.empty {
        position: relative;
        min-height:10em;
        background:#eee;
    }

    figure>picture>img,
    figure>video{
        display:block;
        width:100%;
        height:auto;
        object-fit: cover;
    }
}

.story-block--text,
.story-block--headline,
.story-block--chapterheader{
    >*{
        grid-column-start: 2;
        grid-column-end: 6;
        @media screen and (max-width: 900px) {
            grid-column-start: 1;
            grid-column-end: 7;
        }
    }
    >h2{
        text-align:center;
    }
}

.story-block--double{
    >*:nth-child(1){
        grid-column-start: 1;
        grid-column-end: 4;
    }

    >*:nth-child(2){
        grid-column-start: 4;
        grid-column-end: 7;
    }

    > div {
        display: flex;
        justify-content: start;
        align-items: end;


    }
    >figure{
        margin-left:0;
    }

    @media screen and (max-width: 700px) {
        >*:nth-child(1),
        >*:nth-child(2){
            grid-column-start:1;
            grid-column-end:2;
        }

        &.story-block--text-figure{
            > div {
                grid-row-start: 2;
            }
            >figure{
                grid-row-start: 1;
            }
        }
    }
}

.story-block--figure-null,
.story-block--null-figure{
    >div{
        display:none;
    }
}

.story-block--triple{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas: "a b" "d c";
}

.story-block--triple--image-text-image-null{
    grid-template-areas: "a b" "a c";
    grid-template-rows: min-content auto;
    >figure{
        grid-area: c;
    }
    >figure:first-child{
        grid-area: a;
    }
    >div{
        grid-area: b;
    }
}

.story-block--triple--text-image-null-image{
    grid-template-rows: min-content auto;
    grid-template-areas: "a b" "c b";
    >figure{
        grid-area: c;
    }
    >figure:first-child{
        grid-area: b;
    }
    >div{
        text-align:right;
        grid-area: a;
    }
}