///////////////////////////////////////////////////////////////
// Device: Desktop
///////////////////////////////////////////////////////////////

.spectacle-gallery {
    @include outer-container;
    margin: 40px auto 80px auto;
}

.spectacle-gallery-wrapper {
    @include span-columns(10);
    @include shift(1);
}

.spectacle-gallery-title {
    text-align: left;
    font-family: "lucien-regular";
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 1.2em;
    color: $color-black-light;
}

.spectacle-gallery-list {
    /*@include span-columns(12);
    @include shift(1);*/
}

.spectacle-gallery-list-item {
    @include span-columns(2.4);
    cursor: pointer;
    overflow: hidden;
    height: auto;
    transition: all .2s ease;
    position: relative;

    img {
        border: 4px solid transparent;
        width: 100%;
        transition: all .2s ease;
    }

    &:hover, &.active {
        img {
            border-color: $color-golden;
        }
    }

    &[data-type='video']:before {
        @include icon-video-player-mixin();
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        content: '';
        z-index: 10;
        vertical-align: middle;
        text-align: center;
    }
}

///////////////////////////////////////////////////////////////
// Device: Desktop XL
///////////////////////////////////////////////////////////////

@include desktop-xl {

}

///////////////////////////////////////////////////////////////
// Device: Tablet :: LANDSACPE
///////////////////////////////////////////////////////////////

@include tablet-landscape-and-below {
    .spectacle-gallery {
        display: none;
    }
}

///////////////////////////////////////////////////////////////
// Device: Tablet :: PORTRAIT
///////////////////////////////////////////////////////////////

@include tablet-portrait-and-below {

.spectacle-gallery-list-item {
    &[data-type='video']:before {
        @include icon-video-player-mixin();
            width: 35px;
            height: 35px;
    }
}

}

///////////////////////////////////////////////////////////////
// Device: Mobile
///////////////////////////////////////////////////////////////

@include mobile-landscape-and-below {
    .spectacle-gallery {
        display: none;
        /*margin: 0px auto 50px auto;*/
    }

    .spectacle-gallery-list-item {
        &[data-type='video']:before {
            @include icon-video-player-mixin();
                width: 20px;
                height: 20px;
        }
    }

}

