/* HTML ------------------------------------------------------------------------------------------------------------------------- */
:root{
    --anti-type:#ccc;
}









/* CONTENT  --------------------------------------------------------------------------------------------------------------------- */
.documentation.tdmain{
    min-height: auto;

    & h2{
        grid-column: 1 / 9;
        grid-row: 1;
        max-width: var(--in-width);
        margin: 0 auto;

        font-weight: 500;
        font-size: 0.8rem;
        line-height: 1.1rem;
        letter-spacing: 0.75px;
    }
}



.op-cat{
    grid-column: 1 / 5;
    width: 100%;
    height: fit-content;
    max-width: calc((var(--in-width) / 2) - 1.5rem);
    margin: 0 0 0 auto;

    display: grid;
    -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;

    &.soon{
        color: var(--anti-type);
    }

    & h3{
        position: sticky;
        position: -webkit-sticky;
        top: 6rem;
    }
}

.cat-col{
    -ms-grid-column: 1;
    grid-column: 1;
    width: 100%;
    height: 100%;
    position: relative;
}

.sub-cat{
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2 / 4;
    position: relative;

    display: grid;
    -ms-grid-columns: 1fr 1rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;

    & p{
        margin-top: 0;
    }
}

.op-col{
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2 / 4;
    position: relative;

    & p{
        margin-top: 0;
    }
}