@layer root {
    figcaption {
        text-align: center;
    }

    figcaption:not(:empty) {
        margin-block-start: 0.2em;
    }

    figure {
        grid-column: content-start / content-end;
        margin: 0;
        margin-inline: 0;
        min-width: fit-content;
        overflow: hidden;
    }

    @media (max-width: 415px) {
      figure {
        grid-column: wide-content-start / wide-content-end;
      }
    }

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

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

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

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

    @media (max-width: 414px) {
        figure img {
            max-width: 100%;
        }
    }

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

    figure .youtube {
        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%;
    }
}