/*Article*/
/*for head images and text, gallery immages possible*/

.article {
    color: var(--font-color-black);
}
.article_bg {
    background: var(--background-color-white);
}
.article .scroll_down_indicator {
    stroke: var(--font-color-black);
}
.article block_text {
    background: var(--background-color-white);
}
.article title_body {
    background: var(--background-color-white);
    width: 100%;
    height: 50%;
    max-width: 100%;
}
@media only screen and (min-aspect-ratio: 1/1) { /* Landscape */
    .article head_body {
        width: 100%;
        height: 70%;
        left: 0%;
        top: 5em;
    }
    .article title_body {
        top: calc(70% + 5em);
    }
    .article .bhd_2_0 {
        height: 100%;
        width: calc(50% - 0.5em);
        left: 0em;
        top: 0em;
    }
    .article .bhd_2_1 {
        height: 100%;
        width: calc(50% - 0.5em);
        right: 0em;
        top: 0em;
    }
    
    .article .bhd_3_0 {
        height: 100%;
        width: calc(60% - 1em);
        left: 0em;
        top: 0em;
    }
    .article .bhd_3_1 {
        height: 50%;
        width: 40%;
        right: 0em;
        top: 0em;
    }
    .article .bhd_3_2 {
        height: calc(50% - 1em);
        width: 40%;
        right: 0em;
        bottom: 0em;
    }
    
    .article .bhd_4_0 {
        height: 100%;
        width: calc(25% - 1em);
        left: 0em;
        top: 0em;
    }
    .article .bhd_4_1 {
        height: 100%;
        width: calc(40% - 1em);
        left: 25%;
        top: 0em;
    }
    .article .bhd_4_2 {
        height: 50%;
        width: 35%;
        right: 0em;
        top: 0em;
    }
    .article .bhd_4_3 {
        height: calc(50% - 1em);
        width: 35%;
        right: 0em;
        bottom: 0em;
    }
}
@media only screen and (max-aspect-ratio: 1/1) { /* Portrait */
    .article head_body {
        width: 100%;
        height: 70%;
        left: 0em;
        top: 5em;
    }
    .article title_body {
        top: calc(70% + 5em);
    }
    .article block_text {
        width: 100%;
        margin: 0em 0em 0em 0em;
    }
    .article block_title {
        width: 100%;
        margin: 0em;
    }

    .article .bhd_2_0 {
        width: 100%;
        height: calc(50% - 0.5em);
        left: 0em;
        top: 0em;
    }
    .article  .bhd_2_1 {
        width: 100%;
        height: calc(50% - 0.5em);
        left: 0em;
        bottom: 0em;
    }
    
    .article .bhd_3_0 {
        width: 100%;
        height: calc(65% - 1em);
        left: 0em;
        top: 0em;
    }
    .article .bhd_3_1 {
        width: 50%;
        height: 35%;
        left: 0em;
        bottom: 0em;
    }
    .article .bhd_3_2 {
        width: calc(50% - 1em);
        height: 35%;
        right: 0em;
        bottom: 0em;
    }
    
    .article .bhd_4_0 {
        width: 0%;
        height: 0%;
        left: 0em;
        top: 0em;
    }
    .article .bhd_4_1 {
        width: 100%;
        height: calc(65% - 1em);
        left: 0em;
        top: 0em;
    }
    .article .bhd_4_2 {
        width: 50%;
        height: 35%;
        left: 0em;
        bottom: 0em;
    }
    .article .bhd_4_3 {
        width: calc(50% - 1em);
        height: 35%;
        right: 0em;
        bottom: 0em;
    }
}
@media only screen and (min-aspect-ratio: 19/10) { /* Landscape ultra, for mobile phones turned landscape */
    .article head_body {
        width: 100%;
        height: 60%;
        left: 0%;
        top: 5em;
    }
    .article title_body {
        top: calc(50% + 5em);
    }
}
@media only screen and (max-aspect-ratio: 10/19) { /* Portrait ultra, for mobile phones turned portrait */
    .article head_body {
        width: 100%;
        height: 75%;
        left: 0em;
        top: 5em;
    }
    .article title_body {
        top: calc(75% + 5em);
    }
}