<commit_before>@mixin side {
    position: absolute;
    right: 0;
    top: 0;
    padding: 1px 5px;
    border-left: 1px solid $gray-light;
    border-bottom: 1px solid $gray-light;
}

.dev-overview {
    $border: 2px solid $brand-primary-color;
    $padding: 10px;

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border: $border;
    padding: $padding;
    margin: 30px 0;
    background: $gray-lighter;
    font-size: 14px;

    h4, ul {
        width: 100%;
    }

    h4 {
        margin: 0 0 10px 0;
    }

    &__2nd {
        display: flex;
        position: relative;
        flex-direction: column;
        flex: 1 1 200px;
        border: $border;
        padding: $padding;
        margin: $padding;
        background: white;
        width: calc(50% - (2 * #{$padding}));

        ul {
            align-items: flex-start;
            flex: 1;
        }

        &__side {
            @include side;
        }
    }

    &__3rd {
        border: $border;
        padding: $padding;
        margin: $padding;
        background: $gray-lighter;
    }
}

.dev-transformation {
    $border: 2px solid $gray-light;

    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    margin: 30px 0;
    overflow-x: scroll;

    pre {
        margin: 0;
        height: 100%;
    }

    code {
        height: 100%;
    }

    &__main {
        display: flex;
        flex-direction: column;

        //flex: 1;

        &__part {
            flex: 1 1 120px;
            border: $border;
            border-bottom: none;
            position: relative;

            &:last-of-type {
                border-bottom: $border;
            }

            &__side {
                @include side;

                font-size: 14px;
                color: $gray-lighter;
            }
        }
    }

    &__arrow {
        color: $brand-primary-color;
        width: 50px;
        display: flex;
        padding: 5px;<commit_msg>changed: stretch transformation illustration to full width on large screens<commit_after>@mixin side {
    position: absolute;
    right: 0;
    top: 0;
    padding: 1px 5px;
    border-left: 1px solid $gray-light;
    border-bottom: 1px solid $gray-light;
}

.dev-overview {
    $border: 2px solid $brand-primary-color;
    $padding: 10px;

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border: $border;
    padding: $padding;
    margin: 30px 0;
    background: $gray-lighter;
    font-size: 14px;

    h4, ul {
        width: 100%;
    }

    h4 {
        margin: 0 0 10px 0;
    }

    &__2nd {
        display: flex;
        position: relative;
        flex-direction: column;
        flex: 1 1 200px;
        border: $border;
        padding: $padding;
        margin: $padding;
        background: white;
        width: calc(50% - (2 * #{$padding}));

        ul {
            align-items: flex-start;
            flex: 1;
        }

        &__side {
            @include side;
        }
    }

    &__3rd {
        border: $border;
        padding: $padding;
        margin: $padding;
        background: $gray-lighter;
    }
}

.dev-transformation {
    $border: 2px solid $gray-light;

    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    margin: 30px 0;
    overflow-x: scroll;

    pre {
        margin: 0;
        height: 100%;
    }

    code {
        height: 100%;
    }

    &__main {
        display: flex;
        flex-direction: column;
        flex: 1 1 100px;

        &__part {
            flex: 1 1 120px;
            border: $border;
            border-bottom: none;
            position: relative;

            &:last-of-type {
                border-bottom: $border;
            }

            &__side {
                @include side;

                font-size: 14px;
                color: $gray-lighter;
            }
        }
    }

    &__arrow {
        color: $brand-primary-color;
        width: 50px;
        display: flex;
        padding: 5px;
{'fraction_non_alphanumeric': 0.11429289123335845, 'fraction_numerical': 0.029640793770409443, 'mean_word_length': 1.3858597962852006, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3469226', 'n_tokens_mistral': 1391, 'n_tokens_neox': 1241, 'n_words': 318}