/// /// Ethereal by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) ///

/* Grid Icons */

ul.grid-icons {

@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
@include vendor('justify-content', 'center');
list-style: none;
margin: 0 0 _size(element-margin) 0;
padding-left: 0;

.icon {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;

    &:before {
        display: block;
        width: 6rem;
        height: 6rem;
        line-height: 6rem;
        border-radius: 6rem;
        box-shadow: inset 0 0 0 2px _palette(border);
        font-size: 2.5rem;
        margin: 0 auto;
        text-align: center;

        body.is-ie & {
            line-height: 2.375;
        }
    }
}

> li {
    @include vendor('flex-grow', '0');
    @include vendor('flex-shrink', '0');
    position: relative;
    margin: 1.5rem 0 0 1.5rem;
    padding-left: 0;
}

&.connected {
    > li {
        &:before {
            content: '';
            display: block;
            position: absolute;
            width: 1.5rem;
            height: 2px;
            top: 50%;
            left: -1.5rem;
            background-color: _palette(border);
        }

        &:after {
            content: '';
            display: block;
            position: absolute;
            width: 2px;
            height: 1.5rem;
            top: -1.5rem;
            left: 50%;
            background-color: _palette(border);
        }
    }
}

&.two {
    width: 14rem;

    > li {
        &:nth-child(-n + 2) {
            margin-top: 0;

            &:after {
                display: none;
            }
        }

        &:nth-child(2n - 1) {
            margin-left: 0;

            &:before {
                display: none;
            }
        }
    }
}

&.three {
    width: 21.5rem;

    > li {
        &:nth-child(-n + 3) {
            margin-top: 0;

            &:after {
                display: none;
            }
        }

        &:nth-child(3n - 2) {
            margin-left: 0;

            &:before {
                display: none;
            }
        }
    }
}

&.four {
    width: 29rem;

    > li {
        &:nth-child(-n + 4) {
            margin-top: 0;

            &:after {
                display: none;
            }
        }

        &:nth-child(4n - 3) {
            margin-left: 0;

            &:before {
                display: none;
            }
        }
    }
}

}