#details {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    dd {
        margin-inline: 0;
        display: grid;
        gap: 0.5rem;
    }

    address { font-style: normal }

    a {
        text-decoration: underline;
        text-decoration-color: currentColor;
        transition: color var(--transition-duration) var(--transition-timing);

        &:hover { color: var(--color-1-desaturated) }

        &:focus-visible {
            outline: var(--focus-outline-width) solid var(--color-focus);
            outline-offset: var(--focus-outline-offset);
        }
    }

    .chapter {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 1.5rem;
        font-weight: 700;
    }

    .poster-thumbnail {
        max-inline-size: 100%;
        inline-size: auto;
        max-block-size: 19.375rem;
        block-size: auto;
        margin-inline: auto;
        overflow: clip;
    }

    .poster-trigger {
        cursor: zoom-in;

        &:focus-visible {
            outline: var(--focus-outline-width) solid var(--color-focus);
            outline-offset: var(--focus-outline-offset);
        }
    }

    .poster-viewer {
        border: none;
        background: transparent;

        &::backdrop { background: var(--popover-backdrop-color) }
    }

    .poster-enlarged {
        display: block;
        max-inline-size: 90dvi;
        max-block-size: 90dvh;
    }

    .poster-close {
        position: fixed;
        inset: 1.25rem 1.25rem auto auto;
        display: grid;
        place-items: center;
        color: white;
        font-size: 2.5rem;

        &:focus-visible { outline: 2px solid currentColor }
    }

    .event-map {
        inline-size: 100%;
        aspect-ratio: 2 / 1;

        @container (min-inline-size: 50em) { inline-size: 50% }
    }
}