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

/* Tiles */

.tiles {
        $gutter: _size(gutter);
        $duration: 0.5s;
        $ease: 'ease';
        @include vendor('display', 'flex');
        @include vendor('flex-wrap', 'wrap');
        postiion: relative;
        margin: ($gutter * -1) 0 0 ($gutter * -1);
        article {
                @include vendor('transition', (
                        'transform #{$duration} #{$ease}',
                        'opacity #{$duration} #{$ease}'
                ));
                position: relative;
                width: calc(#{(100% / 3)} - #{$gutter * 1});
                margin: $gutter 0 0 $gutter;
                > .image {
                        @include vendor('transition', 'transform #{$duration} #{$ease}');
                        position: relative;
                        display: block;
                        width: 100%;
                        border-radius: _size(border-radius);
                        overflow: hidden;
                        img {
                                display: block;
                                width: 100%;
                        }
                        &:before {
                                @include vendor('pointer-events', 'none');
                                @include vendor('transition', (
                                        'background-color #{$duration} #{$ease}',
                                        'opacity #{$duration} #{$ease}'
                                ));
                                content: '';
                                display: block;
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                opacity: 1.0;
                                z-index: 1;
                                opacity: 0.8;
                        }
                        &:after {
                                @include vendor('pointer-events', 'none');
                                @include vendor('transition', 'opacity #{$duration} #{$ease}');
                                content: '';
                                display: block;
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 0.25px; stroke: #ffffff; }</style><line x1="0" y1="0" x2="100" y2="100" /><line x1="100" y1="0" x2="0" y2="100" /></svg>');
                                background-position: center;
                                background-repeat: no-repeat;
                                background-size: 100% 100%;
                                opacity: 0.25;
                                z-index: 2;
                        }
                }
                > a {
                        @include vendor('display', 'flex');
                        @include vendor('flex-direction', 'column');
                        @include vendor('align-items', 'center');
                        @include vendor('justify-content', 'center');
                        @include vendor('transition', (
                                'background-color #{$duration} #{$ease}',
                                'transform #{$duration} #{$ease}'
                        ));
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        padding: 1em;
                        border-radius: _size(border-radius);
                        border-bottom: 0;
                        color: _palette(fg-accent);
                        text-align: center;
                        text-decoration: none;
                        z-index: 3;
                        > :last-child {
                                margin: 0;
                        }
                        &:hover {
                                color: _palette(fg-accent) !important;
                        }
                        h2 {
                                margin: 0;
                        }
                        .content {
                                @include vendor('transition', (
                                        'max-height #{$duration} #{$ease}',
                                        'opacity #{$duration} #{$ease}'
                                ));
                                width: 100%;
                                max-height: 0;
                                line-height: 1.5;
                                margin-top: 0.35em;
                                opacity: 0;
                                > :last-child {
                                        margin-bottom: 0;
                                }
                        }
                }
                &.style1 {
                        > .image:before {
                                background-color: _palette(accent1);
                        }
                }
                &.style2 {
                        > .image:before {
                                background-color: _palette(accent2);
                        }
                }
                &.style3 {
                        > .image:before {
                                background-color: _palette(accent3);
                        }
                }
                &.style4 {
                        > .image:before {
                                background-color: _palette(accent4);
                        }
                }
                &.style5 {
                        > .image:before {
                                background-color: _palette(accent5);
                        }
                }
                &.style6 {
                        > .image:before {
                                background-color: _palette(accent6);
                        }
                }
                body:not(.is-touch) & {
                        &:hover {
                                > .image {
                                        @include vendor('transform', 'scale(1.1)');
                                        &:before {
                                                background-color: _palette(bg-accent);
                                                opacity: 0.35;
                                        }
                                        &:after {
                                                opacity: 0;
                                        }
                                }
                                .content {
                                        max-height: 15em;
                                        opacity: 1;
                                }
                        }
                }
        }
        * + & {
                margin-top: _size(element-margin);
        }
        body.is-loading & {
                article {
                        @include vendor('transform', 'scale(0.9)');
                        opacity: 0;
                }
        }
        body.is-touch & {
                article {
                        .content {
                                max-height: 15em;
                                opacity: 1;
                        }
                }
        }
        @include breakpoint(large) {
                $gutter: _size(gutter) * 0.5;
                margin: ($gutter * -1) 0 0 ($gutter * -1);
                article {
                        width: calc(#{(100% / 3)} - #{$gutter * 1});
                        margin: $gutter 0 0 $gutter;
                }
        }
        @include breakpoint(medium) {
                $gutter: _size(gutter);
                margin: ($gutter * -1) 0 0 ($gutter * -1);
                article {
                        width: calc(#{(100% / 2)} - #{$gutter * 1});
                        margin: $gutter 0 0 $gutter;
                }
        }
        @include breakpoint(small) {
                $gutter: _size(gutter) * 0.5;
                margin: ($gutter * -1) 0 0 ($gutter * -1);
                article {
                        width: calc(#{(100% / 2)} - #{$gutter * 1});
                        margin: $gutter 0 0 $gutter;
                        &:hover {
                                > .image {
                                        @include vendor('transform', 'scale(1.0)');
                                }
                        }
                }
        }
        @include breakpoint(xsmall) {
                $gutter: _size(gutter) * 0.5;
                margin: 0;
                article {
                        width: 100%;
                        margin: $gutter 0 0 0;
                }
        }
}