.side-navigation {
    list-style: none;

    @media (min-width: @site-mobile-width) {
        padding: 2px 5px;
    }

    &--layer-0 {
        @media (max-width: @site-mobile-width) {
            font-size: 2em;
            line-height: 1.1em;
        }
    }

    &:not(.side-navigation--layer-0) {
        padding-left: 1em;

        @media (max-width: @site-mobile-width) {
            padding-left: .5em;
        }
    }

    &__title {
        color: var(--text-colour-header);
        font-family: @mio-font-heading;
        display: block;
        font-weight: 700;

        @media (max-width: @site-mobile-width) {
            padding: 4px 6px;
        }
    }

    &__link {
        display: block;
        text-decoration: none;
        color: inherit;

        @media (max-width: @site-mobile-width) {
            padding: 4px 10px;
        }

        &:hover {
            text-decoration: underline;
        }
    }
}