@import './variables';
.footer {
    border-top: 2px #333 solid;
    margin: auto;
    margin-top: 70px;
    margin-bottom: 60px;
    max-width: $content-width;
    .footerGridContainer {
        @media screen and (min-width: 500px) {
            margin-left: -20px;
            margin-right: -20px;
        }
        @include grid-container;
        .footerColumn {
            padding-top: 20px;
            @media screen and (min-width: 500px) {
                @include grid-column(4);
            }
            h1 {
                font-size: 14px;
                font-weight: 700;
                text-align: left;
                text-transform: uppercase;
                &::after {
                    content: none;
                }
            }
            a {
                color: #333;
                text-decoration: none;
                display: block;
                padding: 2px 10px 2px 10px;
                border-left: #CCC 2px solid;
                @include transition(all .1s ease);
                &:hover {
                    border-left: 2px $color-accent solid;
                    background: #e8e8e8;
                }
                &+span {
                    @include transition(all .1s ease);
                    color: #666;
                    font-family: 'Roboto Mono', monospace;
                    font-weight: 400;
                    font-size: 10px;
                    display: block;
                    padding-left: 10px;
                    border-left: 2px #eee solid;
                    margin-bottom: 5px;
                }
                &:hover+span {
                    border-left: 2px $color-accent solid;
                    background: #f0f0f0;
                }
            }
        }
    }
}