@layer root {
    figcaption {
        margin-block-start: 0.2em;
        text-align: center;
    }

    figure {
        border-radius: 6px;
        margin: 0;
        margin-inline: 0;
        overflow: hidden;
        max-width: var(--content-width);
    }

    figure > .container {
        align-items: center;
        display: flex;
        justify-content: center;
        gap: var(--body-item-spacing);
    }

    figure.bordered {
        padding: 0.5rem;
        border: 2px solid #eee;
    }

    figure a,
    figure a:hover {
        border: 0;
    }

    figure img {
        display: block;
        border-radius: 6px;
        height: auto;
        max-width: var(--content-width);
    }

    figure svg {
        width: 100%;
        height: auto;
    }

    figure .youtube {
        border-radius: 6px;
        overflow: hidden;
        max-width: var(--content-width);
        width: 100%;
    }

    .p5-sketch {
        display: block;
        position: relative;
        width: 100%;
    }

    .youtube iframe {
        aspect-ratio: 16 / 9;
        margin-bottom: -3px;
        width: 100%;
    }
}