/* Layout follows the available article width, including when navigation is open. */
.docs-document {
    container: docs-article / inline-size;
}

/* Wide bone-reference tables scroll locally instead of widening the whole page. */
.content-document.docs-document table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.docs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem 2.25rem;
    align-items: start;
    margin: 1.6rem 0 2rem;
}

.docs-layout > div {
    min-width: 0;
}

.docs-layout__text > :first-child,
.docs-layout__media > :first-child {
    margin-top: 0;
}

.docs-layout__text > :last-child,
.docs-layout__media > :last-child {
    margin-bottom: 0;
}

.docs-layout__text > :is(p, ul, ol, blockquote) {
    max-width: 65ch;
}

.content-document .docs-layout__media img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 32rem;
    object-fit: scale-down;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: none;
}

.docs-layout__media {
    text-align: center;
    font-size: 0.92em;
    line-height: 1.55;
}

.content-document .docs-layout__media .content-media-block {
    margin: 0 0 0.65rem;
}

.docs-layout__media > p:not(:has(img)) {
    max-width: 48ch;
    margin: 0.65rem auto;
    color: #bdc9d5;
}

.content-document .docs-layout--image-pair .content-media-block {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

@container docs-article (min-width: 36rem) {
    .docs-layout--image-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .content-document .docs-layout--image-pair .content-media-block {
        height: min(28rem, 50cqw);
    }

    .content-document .docs-layout--image-pair img {
        max-height: min(28rem, 50cqw);
    }
}

@container docs-article (min-width: 48rem) {
    .docs-layout--text-image {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    .docs-layout--image-text {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    }
}