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

/* Panel (Spotlight) */

$pad: _size(pad); $pad-small-tb: _size(pad-small-tb); $pad-small-lr: _size(pad-small-lr);

.panel.spotlight {

@include vendor('align-items', 'stretch');
position: relative;
> * {
    z-index: 1;
}
.content {
    @include vendor('display', 'flex');
    @include vendor('flex-direction', 'column');
    @include vendor('justify-content', 'center');
    @include padding($pad, $pad);
}
.image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    img {
        @include vendor('object-fit', 'cover');
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
&.left {
    @include vendor('justify-content', 'flex-start');
    .content {
        background-image: linear-gradient(-90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.125) 30%, rgba(0,0,0,0.175) 50%);
    }
}
&.right {
    @include vendor('justify-content', 'flex-end');
    .content {
        background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.125) 30%, rgba(0,0,0,0.175) 50%);
    }
}

}