.loginSnippet {
    position: relative;
    display: block;
}

.loginSnippet__userInfo {
    position: relative;
}

.loginSnippet__username,
.loginSnippet__logout {
    position: absolute;
    display: inline-block;
    font-size: .9em;
    text-decoration: none;
}

.loginSnippet__username {
    inset: 0;
    text-indent: -999em;
}

.loginSnippet__logout {
    inset: 0;
    text-indent: -999em;
}

.loginSnippet__link:hover,
.loginSnippet__logout:hover {
    text-decoration: underline;
}

@media screen and (min-width: 500px) {
    .loginSnippet__username {
        position: static;
        text-indent:  0;
    }

    .loginSnippet__link {
        margin-left: 2rem;
        font-weight: 600;
        text-decoration: none;
    }
}

@media screen and (min-width: 900px) {
    .loginSnippet__logout {
        position: static;
        text-indent: 0;
    }
}