h1 {
    font-family: var(--font-serif);
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: var(--step-5);
    line-height: 100%;
    width: 100%;
}

.talk {
    width: 100%;
    max-width: 1400px;
    display: grid;
    grid-template-columns:
        var(--space-s)
        [content-start] 1fr [content-end] var(--space-s);
    grid-template-rows: auto;
    grid-template-areas: 'margin-left content margin-right';

    @media (width >= 800px) {
        grid-template-columns:
            var(--space-l) [bleed-left] var(--space-l)
            [content-start] 1fr [content-end] var(--space-l)
            [bleed-right] var(--space-l);
        grid-template-areas: 'margin-left bleed-left content bleed-right margin-right';
    }

    > * {
        grid-column: content-start / content-end;
    }

    h1 {
        margin-block-start: var(--space-2xl);
    }

    .full-bleed {
        max-inline-size: unset;
        @media (width >= 800px) {
            width: calc(100% + calc(var(--space-l) * 4));
            margin-left: calc(var(--space-l) * -2);
        }

        img {
            width: 100%;
            height: auto;
        }
    }

    img.margin,
    figure.margin {
        @media (width >= 1400px) {
            float: right;
            clear: right;
            width: 300px;
            padding: var(--space-s) 0;
            margin-right: 0em;
        }

        @media (width >= 1400px) {
            margin-right: calc(var(--space-l) * -1);
        }
    }

    img.pull-right {
        @media (width >= 600px) {
            float: right;
            width: 50%;
            padding: 1rem 0 1rem 1rem;
        }
    }

    .credits {
        max-width: var(--measure);
        text-align: right;
    }

    .credits p {
        font-family: var(--font-sans);
        font-size: var(--step--1);
        line-height: 160%;
        padding-block-start: var(--space-s);
        border-block-start: solid 1px #96000c;
    }
}