a.snippet {
    display: block;
    background: var(--highlight-color);
    border-radius: .5rem;
    margin-bottom: .5rem;
    padding: .8rem 1rem;
    text-decoration: none;

    &::before {
        content: '→';
        display: block;
        float: left;
        width: 1.5rem;
        height: 1.5rem;
        margin-right: .2rem;
        font-size: 1.3rem;
        text-align: center;
        vertical-align: middle;
    }

    .snippet-title {
        color: var(--link-color);
        font-size: 1.3rem;
        margin-left: 1.7rem;
    }

    p {
        color: var(--text-color);
        margin-left: 1.7rem;
        margin-bottom: 0;
        padding-bottom: 0;

        &:first-of-type {
            margin-top: .7rem;
        }

        &:last-of-type {
            margin-bottom: 0;
        }
    }
}

a.snippet:hover {
    .snippet-title {
        text-decoration: underline;
    }
}