%reverse-preview-grid {
    grid-column-end: 3 span;
}

.reverse {
    .grid-wrapper {
        grid-template-columns: 2fr 1fr 10% 22%;
    }

    .preview {
        &-background {
            @extend %reverse-preview-grid;
            grid-column: 3/5;
            border-radius: 0 5px 5px 0;
            mask-image: linear-gradient(to left, #000 70%, transparent 100%);
            -webkit-mask-image: linear-gradient(
                to left,
                #000 70%,
                transparent 100%
            );
            background-position: top 35% left 50%;
        }

        &-box {
            @extend %reverse-preview-grid;
            grid-column: 1/4;
        }
    }
}