%preview-grid {
    grid-row-start: 1;
    grid-column-end: span 3;
}

.preview {
    &-wrapper {
        .grid-wrapper {
            width: 100%;
            grid-template-columns: 22% 10% 2fr 1fr;
        }

        .title-area {
            line-height: 1.25;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 5px;
            margin-bottom: 10px;
            align-items: center;

            &__title {
                font-size: 1.35em;
                grid-column: 1/3;
            }

            &__subtitle {
                line-height: 0;
            }

            &__start a {
                font-size: 0.88em;
            }
        }
    }

    &-background {
        @extend %preview-grid;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        grid-column: 1/3;
        border-radius: 5px 0 0 5px;
        mask-image: linear-gradient(to right, #000 70%, transparent 100%);
        -webkit-mask-image: linear-gradient(
            to right,
            #000 70%,
            transparent 100%
        );
        background-position: top 35% right 50%;
    }

    &-box {
        @extend %preview-grid;
        border-radius: 15px 5px;
        background: #fff;
        box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%), 0 0 15px 5px rgb(0 0 0 / 5%);
        padding: 20px;
        grid-column-start: 2;
        z-index: 1;
        margin: 10px;
    }
}