body {

    > main {
        grid-column: picture;

        .back {
            z-index: 90;
            position: fixed;
            display: flex;
            gap: calc(var(--font-size) / 2);
            align-items: center;
            justify-content: center;
            left: 13dvw;
            bottom: 50dvh;
            color: var(--red);
            text-transform: uppercase;
            font-weight: 400;
            svg {
                transform: rotate(180deg);
                fill: var(--red);
            }
            @media (max-width: 1200px) {
                position: relative;
                left: 0;
                top: 0;
            }
        }

        .dates > span {
            display: flex;
            align-items: center;
            gap: var(--gap);
            white-space: nowrap;
            font-size: .75em;
            margin-top: var(--xxl-gap);

            &::after {
                content: "";
                flex: 1;
                height: 1px;
                background: var(--lightgrey);
            }
        }

        article {
            margin-block: var(--gap);
            padding: var(--gap);
            border: 1px solid var(--lightgrey);

            display: grid;
            grid-template-columns: 1fr 4fr;

            * {
                hyphens: auto;
            }

            > div:first-child {
                order: 3;
                display: grid;
                > h2 {
                    order: 2;
                    color: var(--red);
                    font-size: 2rem;
                }
                > h3 {
                    order: 3;
                }
                > h4 {
                    order: 1;
                    font-size: var(--font-size);
                    time {
                        font-size: var(--font-size);
                        font-weight: 100;
                    }
                }
            }
            > div:last-child {
                order: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: var(--font-size);
                font-weight: 100;
                > span {
                    font-size: 5rem;
                    color: var(--grey);
                }
            }
            &:hover {
                background: linear-gradient(to bottom, color-mix(in srgb, var(--lightgrey) 100%, white 100%), color-mix(in srgb, var(--lightgrey) 10%, white 100%) 20%, color-mix(in srgb, var(--lightgrey) 10%, white 100%) 80%, color-mix(in srgb, var(--lightgrey) 50%, white 100%));
                * {
                    text-decoration: underline;
                }
            }

            @media (max-width: 800px) {
                grid-template-columns: 1fr;
                > div:last-child {
                    display: none;
                }
            }
        }
        > hr {
            border: 0;
            border-bottom: 1px solid var(--red);
            margin-block: var(--xxl-gap);
        }
        > div {
            display: flex;
            flex-wrap: wrap;
            gap: var(--gap) var(--l-gap);
            > div {
                flex: 1;
                flex-basis: 30%;
                display: flex;
                flex-direction: column;
                > * {
                    margin: 0;
                }
                > a,
                > .h4 {
                    margin-top: var(--gap);
                    font-size: var(--font-size) !important;
                }
                > a {
                    color: var(--red);
                }
            }
            iframe {
                flex-basis: 100%;
                flex: 1;
                aspect-ratio: 2 / 1;
            }
        }
        > aside {
            margin-block: var(--xxl-gap);
        }
    }
}