.docs {
    aside.docs-menu {
        padding: 2rem 1rem;
        width: 12rem;

        ul {
            padding: 0;
            li {
                list-style: none;
                a {
                    color: $primary;
                    line-height: 1.6rem;
                    margin-bottom: 0.6rem;
                    border-bottom: 2px solid transparent;
                    text-decoration: none;
                    cursor: pointer;

                    &:hover {

                        border-bottom-color: $primary;
                    }
                }
            }
        }
    }

    aside.docs-content {
        border-left: 1px solid $secondGrey;
        padding: 1rem;
        flex: 1;

        h2 {
            font-weight: normal;
            font-size: 1.5rem;
            color: #000;
            border-bottom: 1px solid #e0e0e0;
            line-height: 3rem;
            margin-bottom: 1rem;
        }
        h3 {
            font-weight: normal;
            font-size: 1.3rem;
            color: $secondary;
        }

        pre {
            background: #f6f6f6;
            padding: 1rem;
            code {
                background: inherit;
            }
        }
        code {
            color: #0e1954;
            background: #e5f2ff;
        }
    }
}

.docs {
    aside.docs-menu {
        padding: 2rem 1rem;
        width: 12rem;
        flex-wrap: nowrap;

        @include media-query($on-small) {
            flex-wrap: wrap;
        }

        ul {
            padding: 0;
            li {
                list-style: none;
                a {
                    color: $primary;
                    line-height: 1.6rem;
                    margin-bottom: 0.6rem;
                    border-bottom: 2px solid transparent;
                    text-decoration: none;
                    cursor: pointer;

                    &:hover {

                        border-bottom-color: $primary;
                    }
                }
            }
        }
    }

    aside.docs-content {
        border-left: 1px solid $secondGrey;
        padding: 1rem;
        flex: 1;

        h2 {
            font-weight: normal;
            font-size: 1.5rem;
            color: #000;
            border-bottom: 1px solid #e0e0e0;
            line-height: 3rem;
            margin-bottom: 1rem;
        }
        h3 {
            font-weight: normal;
            font-size: 1.3rem;
            color: $secondary;
        }

        pre {
            background: #f6f6f6;
            padding: 1rem;
            code {
                background: inherit;
            }
        }
        code {
            color: #0e1954;
            background: #e5f2ff;
        }
    }
}

Fix docs on small devices
Fix docs on small devices
