@import '../libs/vars'; @import '../libs/functions'; @import '../libs/mixins';

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

/* Thumbnails */

#thumbnails {
        @include vendor('display', 'flex');
        @include vendor('flex-wrap', 'wrap');
        padding: 0 0.75em;
        article {
                position: relative;
                width: #{100% / _misc(thumbnails-per-row)};
                background: #101010;
                outline: 0;
                .thumbnail {
                        -webkit-tap-highlight-color: rgba(0,0,0,0);
                        display: block;
                        position: relative;
                        border: 0;
                        outline: 0;
                        img {
                                display: block;
                                width: 100%;
                        }
                        &:before {
                                @include vendor('pointer-events', 'none');
                                @include vendor('transition', 'opacity 0.25s ease');
                                content: '';
                                position: absolute;
                                left: 0;
                                top: 0;
                                width: 100%;
                                height: 100%;
                                box-shadow: inset 0 0 0 2px _palette(accent), inset 0 0 0px 3px rgba(0,0,0,0.15);
                                opacity: 0;
                                z-index: 1;
                        }
                        &:focus {
                                &:before {
                                        opacity: 0.5;
                                }
                        }
                }
                h2, p {
                        display: none;
                }
                &.active {
                        .thumbnail {
                                &:before {
                                        opacity: 1;
                                }
                        }
                }
        }
        @include breakpoint(xsmall) {
                article {
                        .thumbnail {
                                &:before {
                                        display: none;
                                }
                        }
                }
        }
}