.offcanvas {
    &.offcanvas--materials {
        
        ul { list-style: none; margin: 0; padding: 0;
            a { display: flex; gap: .5rem; align-items: center; text-decoration: none; color: inherit; padding-bottom: .5rem;
                span { display: inline-block; background: var(--clr-primary-10); width: 1rem; height: 1rem; font-weight: 500; border-radius: .2rem; line-height: 1; text-align: center; }

                &:hover { text-decoration: underline; }
            }
            ul { margin-left: 1rem; }
        }
    }
}

@media (min-width: 1200px) {
    .offcanvas {
        &.offcanvas--materials { overflow: hidden; position: sticky; top: 6.25rem; transform: none; visibility: visible !important; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); width: auto; transition: none!important;
            .offcanvas-header { display: none; }
            .offcanvas-body { max-height: 85dvh; overflow-y: auto; }
        }
    }
}