/* Facts */

.facts {
    $gutter: 1px;

    @include vendor('display', 'flex');
    @include vendor('flex-wrap', 'wrap');
    margin: 0 0 0 0;
    width: 100%;

    article {
        @include vendor('flex-grow', '1');
        @include vendor('flex-shrink', '1');
        margin: 0 0 $gutter $gutter;
        position: relative;
        min-height: 512px;

        &:before {
            background: _palette(border);
            content: '';
            display: block;
            height: 100%;
            left: ($gutter * -0.5);
            position: absolute;
            top: 0;
            width: 1px;
        }

        > :last-child {
            margin-bottom: 0;
        }

        .icon {
            position: relative;
            margin: 0;
            width: 100%;
            height: 20%;
            text-align: center;
            font-size: 3rem;
            color: _palette(accent) !important;
        }

        .fact-intro, .fact-outro {
            position: relative;
            width: 100%;
            height: 30%;
            margin: 0;

            p {
                margin: 0;
                display: table-cell;
                text-align: center;
                font-size: 1rem;
            }
        }

        .fact-intro p {
            vertical-align: bottom;
            text-transform: uppercase;
        }

        .fact-outro p {
            vertical-align: top;
            text-transform: lowercase;
        }


        .fact {
            position: relative;
            width: 100%;
            height: 20%;
            margin: 0;

            h3 {
                margin: 0;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                text-transform: uppercase;
                font-size: 2rem;
            }
        }
    }

    article {
        .off {
            display: none;
        }

        .on.icon {
            display: block;
        }

        .on.fact-intro {
            display: table;
        }

        .on.fact {
            display: table;
        }

        .on.fact-outro {
            display: table;
        }
    }

    article:hover {
        background-color: _palette(accent) !important;

        .on {
            display: none;
        }

        .off.icon {
            display: block;
            color: _palette(accent-cp) !important;
        }

        .off.fact-intro {
            display: table;

            p {
                color: #ffffff !important;
            }
        }

        .off.fact {
            display: table;
            
            h3 {
                color: #ffffff !important;
            }
        }

        .off.fact-outro {
            display: table;
            
            p {
                color: #ffffff !important;
            }
        }
    }
}