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

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

/* Spotlight */

.spotlight {
        @include vendor('display', 'flex');
        @include vendor('align-items', 'center');
        margin: 0 0 _size(element-margin) 0;
        .image {
                width: 30%;
                border-radius: 100%;
                margin: 0 (_size(element-margin) * 1.5) 0 0;
                display: block;
                img {
                        display: block;
                        border-radius: 100%;
                        width: 100%;
                }
        }
        .content {
                width: 70%;
                > :last-child {
                        margin-bottom: 0;
                }
        }
        &:nth-child(2n) {
                @include vendor('flex-direction', 'row-reverse');
                .image {
                        margin: 0 0 0 (_size(element-margin) * 1.5);
                }
                .content {
                        text-align: right;
                }
        }
        // Small.
                @include breakpoint(small) {
                        // Landscape.
                                @include orientation(landscape) {
                                        .image {
                                                margin: 0 _size(element-margin) 0 0;
                                        }
                                        &:nth-child(2n) {
                                                .image {
                                                        margin: 0 0 0 _size(element-margin);
                                                }
                                        }
                                }
                        // Portrait.
                                @include orientation(portrait) {
                                        @include vendor('flex-direction', 'column !important');
                                        .image {
                                                width: 100%;
                                                max-width: 60%;
                                                margin: 0 0 _size(element-margin) 0 !important;
                                        }
                                        .content {
                                                width: 100%;
                                                text-align: center !important;
                                        }
                                }
                }
}