<commit_before>@import "news_special/defaults";
@import "news_special/_boilerplate_utils";
@import "news_special/_boilerplate_tags";
@import "app";
@import "hero_video";
@import "death";
@import "population";
@import "price_of_food";
@import "health";
@import "schools";
@import "credits-share-and-more";

.ns_rtl {
    direction: rtl;
}

.main {
    font-size: 1.6em;
    .wrapper, .content, .wrapper-no-pad {
        margin: 0 8px;
        max-width: 1008px;
    }
    @media (min-width: 400px) {
        .wrapper, .content, .wrapper-no-pad {
            margin: 0 16px;
        }
    }
    @media (min-width: 800px) {
        .wrapper, .content, .wrapper-no-pad {
            margin: 0 16px;
        }
    }
    @media (min-width: 1008px) {
        .wrapper, .content, .wrapper-no-pad {
            margin: 0 auto;
        }
    }
}
.content {
    @extend .wrapper;
}

.story-body {
    > *:first-child {
        margin-top: 0;
    }

    > figure:first-child + * {
        margin-top: 0;
    }
}

.story-body {
    padding-top: 1.75em;
    color: #404040;

    @include respondMinMax (600px, false) {
        margin-left: 8.333%;
        margin-right: 8.333%;
    }

    @include respondMinMax (1008px, false) {
        margin-left: 0;
        padding-right: 8.333%;
        margin-right: 0;
    }

    p {
        line-height: 1.375;
        margin-top: 1em;
        margin-bottom: 1em;
        @include respondMinMax (600px, false) {
            font-size: 1.125em;
        }
        @include respondMinMax (1008px, false) {
            font-size: 1em;
        }
        @include respondMinMax (1280px, false) {
            font-size: 1.125em;
        }
    }

    h1, h2, h3, h4 {
        color: #1e1e1e;
    }
}

.hero-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ccc;
    background-position: center;
    height: 0;
    padding-bottom: 37%;
    position: relative;

    @media (max-aspect-ratio: 1/1) {
        padding-bottom: 67%;
    }

    @media (min-width: 320px) and (max-aspect-ratio: 8/10) {
        padding-bottom: 100%;
    }

    @media (min-width: 480px) and (max-aspect-ratio: 1/1) {
        padding-bottom: 67%;
    }
}

.story-image-full {
    @media (max-aspect-ratio: 1/1) {
        padding-bottom: 67%;
    }
}

.hero-wrapper {
    height: 100%;
    padding: 0 8px;
    position: absolute;
    width: 100%;

    @include respondMinMax (1008px, false) {
        left: 50%;
        max-width: 1008px;
        margin-left: -504px; //1008 / 2 * -1
    }

    @include respondMinMax (1280px, false) {
        max-width: 1280px;
        margin-left: -640px;//1280 / 2 * -1px
    }<commit_msg>attempted video aspect ratio fix<commit_after>@import "news_special/defaults";
@import "news_special/_boilerplate_utils";
@import "news_special/_boilerplate_tags";
@import "app";
@import "hero_video";
@import "death";
@import "population";
@import "price_of_food";
@import "health";
@import "schools";
@import "credits-share-and-more";

.ns_rtl {
    direction: rtl;
}

.main {
    font-size: 1.6em;
    .wrapper, .content, .wrapper-no-pad {
        margin: 0 8px;
        max-width: 1008px;
    }
    @media (min-width: 400px) {
        .wrapper, .content, .wrapper-no-pad {
            margin: 0 16px;
        }
    }
    @media (min-width: 800px) {
        .wrapper, .content, .wrapper-no-pad {
            margin: 0 16px;
        }
    }
    @media (min-width: 1008px) {
        .wrapper, .content, .wrapper-no-pad {
            margin: 0 auto;
        }
    }
}
.content {
    @extend .wrapper;
}

.story-body {
    > *:first-child {
        margin-top: 0;
    }

    > figure:first-child + * {
        margin-top: 0;
    }
}

.story-body {
    padding-top: 1.75em;
    color: #404040;

    @include respondMinMax (600px, false) {
        margin-left: 8.333%;
        margin-right: 8.333%;
    }

    @include respondMinMax (1008px, false) {
        margin-left: 0;
        padding-right: 8.333%;
        margin-right: 0;
    }

    p {
        line-height: 1.375;
        margin-top: 1em;
        margin-bottom: 1em;
        @include respondMinMax (600px, false) {
            font-size: 1.125em;
        }
        @include respondMinMax (1008px, false) {
            font-size: 1em;
        }
        @include respondMinMax (1280px, false) {
            font-size: 1.125em;
        }
    }

    h1, h2, h3, h4 {
        color: #1e1e1e;
    }
}

.hero-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ccc;
    background-position: center;
    height: 0;
    padding-bottom: 56%;
    position: relative;

    @media (min-width: 1430px) {
        padding-bottom: 45%;
    }

    @media (min-width: 1640px) {
        padding-bottom: 38%;
    }
}

.story-image-full {
    @media (max-aspect-ratio: 1/1) {
        padding-bottom: 67%;
    }
}

.hero-wrapper {
    height: 100%;
    padding: 0 8px;
    position: absolute;
    width: 100%;

    @include respondMinMax (1008px, false) {
        left: 50%;
        max-width: 1008px;
        margin-left: -504px; //1008 / 2 * -1
    }

    @include respondMinMax (1280px, false) {
        max-width: 1280px;
        margin-left: -640px;//1280 / 2 * -1px
    }
{'fraction_non_alphanumeric': 0.14792785878741366, 'fraction_numerical': 0.0602455871066769, 'mean_word_length': 1.85957213384531, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, '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': '4012288', 'n_tokens_mistral': 2131, 'n_tokens_neox': 1868, 'n_words': 397}