@import '../definitions/mixins';

@mixin product-viewer {
    &_row {
        @include grid-row;
        
        @include media-lg-up {
            display: flex;
        }
    }
    &_title {
        &--hidden {
            @extend %sr-only;
        }
    }
    &_imageViewer:not(:empty),
    &_description {
        @include grid-item;
    }
    &_imageViewer:not(:empty) + &_description {
        @include media-lg-down {
            margin-top: $grid-gutter-height-large;
        }
        @include media-lg-up {
            @include grid-offset;
            @include grid-width(6);
        }
    }
    &_imageViewer:not(:empty) {
        @include media-lg-up {
            @include grid-width(5);
        }
    }
    &_image {
        display: block;
        @include fit;
        
        @include media-lg-up {
            width: 100%;
        }

        @include media-lg-down {
            max-height: 300px;
        }
    }
}