@media (min-width: 990px) {
    .bd-layout {
        display: grid;
        grid-template-areas: "sidebar main";
        grid-template-columns: 2fr 4.5fr;
        gap: .5rem
    }
    .bd-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 5rem;
        display: block !important;
        height: calc(100vh - 6rem);
        padding-left: .25rem;
        margin-left: -.25rem;
        overflow-y: auto
    }
}
.bd-sidebar {
    grid-area: sidebar
}
.bd-main {
    grid-area: main;
    min-width: 0
}
:target::before {
    content: '';
    display: block;
    height: 70px;
    margin-top: -70px;
}
/* The container stays fixed in the page flow */
.code-container {
    position: relative;
    margin-bottom: 1.5rem;
}

    /* The code block scrolls inside the container */
    .code-container pre {
        margin-bottom: 0 !important;
        overflow-x: auto;
        display: block;
        padding: 1rem;
        background-color: #f8f9fa; /* Matches standard light themes */
        border: 1px solid #e9ecef;
        border-radius: 4px;
    }

/* The button is anchored to the top-right of the CONTAINER */
.btn-copy-code {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    opacity: 0.7;
    border: 1px solid #ddd !important;
    background-color: white !important;
}

.btn-copy-code:hover {
    opacity: 1;
}

mark.ug-highlight {
    background-color: #0078d7;
    color: #fff;
    padding: 0;
}