<commit_before>.rlo-view-container{
    position: absolute;
    margin: 0 auto;
    left: 1px;
    right: 0;
}
@mixin aspect-ratio($ratio, $col-number,$row-number) {
    $padding: percentage(0.99/$ratio);
    $width: percentage(0.99/$col-number);
    $intro-content-height: percentage(0.8/$row-number);
    $title-margin-top: percentage(0.99/$col-number);
    &>.rlo-tile {
        width: $width;
        padding-bottom: $padding;
        &>.rlo-tile-intro-content{
            height: $intro-content-height;
            width: $width;
        }
        &>.rlo-tile-title{
            width: $width;            
            margin-top: calc(#{$title-margin-top} - 3em);
        }
    }
}

.rlo-list {
    @include aspect-ratio(3,3,5);
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    &>.rlo-tile {
        margin: 1px 1px;
        background: #8AC007;
        &>.rlo-tile-intro-title{
            position: absolute;
            padding: 10px;
            overflow: auto;
            font-size: large;
        }
        &>.rlo-tile-intro-content{
            position: absolute;
            padding-left: 10px;
            margin-top: 35px;
            overflow: auto;
        }
        &>.rlo-tile-preview{
            position: absolute;
            padding: 10px;
        }
        &>.rlo-tile-title{
            position: absolute;
            background: rgba(0, 0, 0, 0.75);
            color: white;
            height: 3em;
            padding: 15px;
            font: 15px Sans-Serif;
        }
        &>.rlo-tile-info{
            position: absolute;
            padding-left: 10px;
            margin-top: 35px;
        }
    }
}


@media screen and (max-width: 640px) {
    .rlo-list {
        @include aspect-ratio(2,2,7);
    }
}

@media screen and (max-width: 480px) {
    .rlo-list {
        @include aspect-ratio(1,1,13);
    }
}
/*Tablets Landscape */
@media screen and (min-device-width: 768px) 
               and (max-device-width: 1024px) 
               and (orientation: landscape)  {
    .rlo-list {
        @include aspect-ratio(3,3,5);
    }
}
/*Tablets Portrait */
@media screen and (min-device-width: 768px) 
               and (max-device-width: 1024px) 
               and (orientation: portrait)  {
    .rlo-list {
        @include aspect-ratio(1,1,13);
    }
}

/*Mobile Phones Portrait */
@media screen and (max-device-width: 640px) 
               and (orientation: portrait){
    .rlo-list {
        @include aspect-ratio(3,3,5);
    }
}

/* Mobile Phones Landscape */
@media screen and (max-device-width: 640px) 
               and (orientation: landscape){
    .rlo-list {
        @include aspect-ratio(2,2,7);
    }
}
/* Mobile Phones portrait */
@media screen and (max-device-width: 480px) 
               and (orientation: portrait){
    .rlo-list {
        @include aspect-ratio(1,1,13);
    }
}
/* Mobile Phones Landscape */
@media screen and (max-device-width: 480px) 
               and (orientation: landscape){
    .rlo-list {
        @include aspect-ratio(2,2,7);
    }
}
<commit_msg>Update rlo-view.scss<commit_after>.rlo-view-container{
    position: absolute;
    margin: 0 auto;
    left: 1px;
    right: 0;
}
@mixin aspect-ratio($ratio, $col-number,$row-number) {
    $padding: percentage(0.99/$ratio);
    $width: percentage(0.99/$col-number);
    $intro-content-height: percentage(0.8/$row-number);
    $title-margin-top: percentage(0.99/$col-number);
    &>.rlo-tile {
        width: $width;
        padding-bottom: $padding;
        &>.rlo-tile-intro-content{
            height: $intro-content-height;
            width: $width;
        }
        &>.rlo-tile-title{
            width: $width;            
            margin-top: calc(#{$title-margin-top} - 3em);
        }
    }
}

.rlo-list {
    @include aspect-ratio(3,3,5);
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    &>.rlo-tile {
        margin: 1px 1px;
        background: #8AC007;
        &>.rlo-tile-intro-title{
            position: absolute;
            padding: 10px;
            overflow: auto;
            font-size: large;
        }
        &>.rlo-tile-intro-content{
            position: absolute;
            padding-left: 10px;
            margin-top: 35px;
            overflow: auto;
        }
        &>.rlo-tile-preview{
            position: absolute;
            padding: 10px;
        }
        &>.rlo-tile-title{
            position: absolute;
            background: rgba(0, 0, 0, 0.75);
            color: white;
            height: 3em;
            padding: 15px;
            font: 15px Sans-Serif;
        }
        &>.rlo-tile-info{
            position: absolute;
            padding-left: 10px;
            margin-top: 35px;
        }
    }
}


@media screen and (max-width: 640px) {
    .rlo-list {
        @include aspect-ratio(2,2,7);
    }
}

@media screen and (max-width: 480px) {
    .rlo-list {
        @include aspect-ratio(1,1,13);
    }
}
/*Tablets Landscape */
@media screen and (min-device-width: 768px) 
               and (max-device-width: 1024px) 
               and (orientation: landscape)  {
    .rlo-list {
        @include aspect-ratio(3,3,5);
    }
}
/*Tablets Portrait */
@media screen and (min-device-width: 768px) 
               and (max-device-width: 1024px) 
               and (orientation: portrait)  {
    .rlo-list {
        @include aspect-ratio(1,1,13);
    }
}

/*Mobile Phones Portrait */
@media screen and (max-device-width: 640px) 
               and (orientation: portrait){
    .rlo-list {
        @include aspect-ratio(1,1,13);
    }
}

/* Mobile Phones Landscape */
@media screen and (max-device-width: 640px) 
               and (orientation: landscape){
    .rlo-list {
        @include aspect-ratio(2,2,7);
    }
}
/* Mobile Phones portrait */
@media screen and (max-device-width: 480px) 
               and (orientation: portrait){
    .rlo-list {
        @include aspect-ratio(1,1,13);
    }
}
/* Mobile Phones Landscape */
@media screen and (max-device-width: 480px) 
               and (orientation: landscape){
    .rlo-list {
        @include aspect-ratio(2,2,7);
    }
}

{'fraction_non_alphanumeric': 0.1437929905011464, 'fraction_numerical': 0.03586636095643629, 'mean_word_length': 1.6761612620508326, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 21, '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': '6477068', 'n_tokens_mistral': 2181, 'n_tokens_neox': 1991, 'n_words': 409}