.container--article {
    --container__column-one_width: 70rem;
    --container__columns_grid-template-areas: ". one two .";
    --container__columns_grid-template-columns: auto minmax(10rem, var(--container__column-one_width)) minmax(10rem, var(--container__column-two_width)) auto;
    --container__column-two_width: 30rem
}

@media (max-width: 991px) {
    .container--article {
        --container__columns_grid-template-areas: "one" "two";
        --container__columns_grid-template-columns: 1fr
    }
}

.container--article .section--footer {
    --container__section_background: #f1f3f4
}

.container--article .section--search {
    --container__section_background: #ffffff;
    --container__section_box-shadow: 0 0.4rem 0.8rem -0.2rem rgba(16, 24, 40, 0.1), 0 0.2rem 0.4rem -0.2rem rgba(16, 24, 40, 0.06)
}

.container--article .section--search-category {
    --container__section_background: #ffffff;
    --container__section_box-shadow: 0 0.4rem 0.8rem -0.2rem rgba(16, 24, 40, 0.1), 0 0.2rem 0.4rem -0.2rem rgba(16, 24, 40, 0.06)
}

.container--article {
    background: var(--container__background, none);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh
}

@media (min-width: 768px) {
    .container--article .columns__column--two {
        height: -webkit-max-content;
        height: -moz-max-content;
        height: max-content;
        position: sticky;
        left: 0;
        top: 82px
    }
}

.container--article .section--search {
    background-color: var(--container__section_background, #fff);
    border-top: var(--container__border-top, 0.3rem solid var(--brand-primary-color));
    position: sticky;
    top: 0;
    z-index: 10
}

@media (max-width: 767px) {
    .container--article .section--search .search-header {
        grid-column-gap: 1rem;
        grid-template-areas: "logo search navigation-more";
        grid-template-columns: 4rem 1fr 4rem;
        grid-template-rows: -webkit-max-content;
        grid-template-rows: max-content
    }

    .container--article .section--search .search-header__brand-image,
    .container--article .section--search .search-header__navigation {
        display: none
    }

    .container--article .section--search .search-header__brand-icon {
        display: block
    }

    .container--article .section--search .search-header__navigation-more {
        border-radius: 0.5rem;
        display: grid;
        height: 3.5rem;
        margin: auto;
        place-items: center;
        width: 3.5rem
    }

    .container--article .section--search .search-header__navigation-more:after {
        color: var(--container__section_color);
        content: "\2630";
        font-size: 2rem
    }

    .container--article .section--search .search-header__navigation-more--active {
        background-color: #f1f3f4
    }

    .container--article .section--search .search-header__navigation-more--active:after {
        color: #1d2849
    }

    .container--article .section--search .search-header__navigation-more .search-header__category-more {
        display: none
    }

    .container--article .section--search .search-header .search-bar__form {
        grid-area: search;
        margin: 0
    }
}

.container--article .section--search-category {
    left: 0;
    overflow-y: auto;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9
}

@media (max-width: 767px) {
    .container--article .section--search-category {
        padding-bottom: 6rem
    }
}

.html--article.html--mode-dark {
    --container__background: #01074b;
    --container__section_box-shadow: none;
    --container__section_color: #ffffff;
    --container__section_highlight_color: var(--brand-primary-color)
}

.html--article.html--mode-dark .section--search-category {
    --container__section_background: #0f176b;
    --container__section_box-shadow: 0 0.2rem 0.4rem 0 rgba(16, 24, 40, 0.3)
}

.columns--default {
    background: var(--container__section_background, none);
    border-top: var(--container__section_border-top, 0);
    -webkit-box-shadow: var(--container__section_box-shadow, none);
    box-shadow: var(--container__section_box-shadow, none);
    display: grid;
    grid-template-areas: var(--container__columns_grid-template-areas);
    grid-template-columns: var(--container__columns_grid-template-columns);
    padding:5px;
}

.columns--default .columns__column--one {
    grid-column: one
}

.columns--default .columns__column--two {
    grid-column: two
}

.columns--default .columns__column--three {
    grid-column: three
}


.content-page-header--default .content-page-header__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.2rem;
    line-height: 1.6rem
}

.content-page-header--default .content-page-header__left {
    -ms-flex-preferred-size: 80%;
    flex-basis: 80%;
    overflow: hidden;
    text-overflow: ellipsis
}

.content-page-header--default .content-page-header__home-link {
    position: relative
}

.content-page-header--default .content-page-header__home-link:before {
    color: var(--container__section_highlight_color, var(--home-link-before_color, #1d2849));
    content: "";
    left: 0;
    line-height: 1.6rem;
    position: absolute;
    top: 0
}

.content-page-header--default .content-page-header__link {
    color: var(--container__section_color, var(--link_color, #505058));
    display: block;
    overflow: hidden;
    padding-left: 1.6rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.content-page-header--default .content-page-header__page {
    color: var(--container__section_color, var(--page_color, #505058));
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    text-align: end
}

.content-page-title--default {
    padding-top: 1rem
}

.content-page-title--default .content-page-title__text {
    color: var(--container__section_color, var(--text_color, #1d2849));
    font-size: var(--text_font-size, 2.8rem);
    font-weight: 600;
    line-height: var(--text_line-height, 3.2rem)
}

@media (max-width: 991px) {
    .content-page-title--default {
        --text_line-height: 3rem;
        --text_font-size: 2.2rem
    }
}

.content-page-results--card-4 .content-page-results__items {
    display: grid;
    gap: 3rem;
    grid-template-columns: repeat(var(--items_grid-template-columns-amount), 1fr)
}

@media (min-width: 768px) and (max-width: 991px) {
    .content-page-results--card-4 .content-page-results__items {
        grid-template-columns: repeat(var(--_items_grid-template-columns), 1fr);
        --_items_grid-template-columns: min(var(--items_grid-template-columns-amount), 2)
    }
}

@media (max-width: 767px) {
    .content-page-results--card-4 .content-page-results__items {
        grid-template-columns: 1fr
    }
}

.content-page-results--card-4 .content-page-results__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    row-gap: 1.6rem
}

.content-page-results--card-4 .content-page-results__image {
    width: 100%
}

.content-page-results--card-4 .content-page-results__content-container {
    -webkit-box-orient: vertical;
    color: var(--container__section_color, #1d2849);
    display: -webkit-box;
    font-size: 1.6rem;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    line-height: 2.4rem;
    overflow: hidden;
    text-overflow: ellipsis
}

.content-page-results--card-4 .content-page-results__title {
    display: block;
    font-size: 2rem;
    /* margin-bottom: 2.4rem; */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    line-height: 1.5;

}

.content-page-results--card-4 .content-page-results__badge-container {
    -webkit-column-gap: 1rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    display: grid;
    grid-template-columns: auto 1fr
}

.content-page-results--card-4 .content-page-results__category {
    background: #eceff1;
    border-radius: 0.4rem;
    color: #8e93a4;
    display: inline-block;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    font-size: 1.4rem;
    line-height: 2.4rem;
    overflow: hidden;
    padding: 0 0.6rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.content-page-results--card-4 .content-page-results__read-time {
    color: #8e93a4;
    font-size: 1.4rem;
    justify-self: end;
    line-height: 2.4rem;
    white-space: nowrap
}

/* popular articles */
.content-page-results--rank-list-1 .content-page-results__items {
    display: grid;
    gap: 1rem 3rem;
    grid-template-columns: repeat(var(--items_grid-template-columns-amount), 1fr)
}

@media (max-width: 991px) {
    .content-page-results--rank-list-1 .content-page-results__items {
        grid-template-columns: 1fr
    }
}

.content-page-results--rank-list-1 .content-page-results__item {
    counter-increment: items
}

.content-page-results--rank-list-1 .content-page-results__container {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-column-gap: 1rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.content-page-results--rank-list-1 .content-page-results__image-container {
    height: 8rem;
    position: relative;
    width: 8rem
}

.content-page-results--rank-list-1 .content-page-results__image-container:after {
    background: var(--brand-primary-color);
    border-radius: 1.2rem;
    color: #ffffff;
    content: counter(items);
    cursor: pointer;
    display: block;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2.4rem;
    min-width: 2.4rem;
    position: absolute;
    right: 0.4rem;
    text-align: center;
    top: 0.4rem
}

.content-page-results--rank-list-1 .content-page-results__image {
    border-radius: 1.2rem;
    height: 8rem;
    width: 8rem
}

.content-page-results--rank-list-1 .content-page-results__title {
    -webkit-box-orient: vertical;
    color: var(--container__section_color, #1d2849);
    display: -webkit-box;
    font-size: 1.4rem;
    font-weight: 400;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    line-height: 1.5;
    max-height: 6.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word
}

.content-page-results--reset-counter {
    counter-reset: items
}


.content-page-category-results--default .content-page-category-results__title {
    border-bottom: 0;
    color: #1d2849;
    font-size: 2.4rem;
    line-height: 3.2rem;
    margin-bottom: 2.2rem;
    padding-bottom: 1.4rem
}

@media (max-width: 767px) {
    .content-page-category-results--default .content-page-category-results__title {
        padding-bottom: 1.2rem
    }
}

.content-page-category-results--default .content-page-category-results__title--highlighted {
    color: var(--brand-primary-color)
}

.content-page-category-results--default .content-page-category-results__items {
    display: grid;
    gap: 2rem;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr;
    row-gap: 0.6rem
}

@media (min-width: 992px) {
    .content-page-category-results--default .content-page-category-results__items {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .content-page-category-results--default .content-page-category-results__items {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (min-width: 500px) and (max-width: 767px) {
    .content-page-category-results--default .content-page-category-results__items {
        grid-template-columns: repeat(2, 1fr)
    }
}

.content-page-category-results--default .content-page-category-results__item-link {
    color: var(--container__section_color, #1d2849);
    font-size: 1.6rem;
    line-height: 2.4rem
}

.content-page-category-results--default .content-page-category-results__item-link:hover {
    text-decoration: underline
}

.title--content-4 .title__title {
    color: var(--container__section_color, #101828);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.8rem
}

.title--content-4 .title__title-highlighted {
    color: var(--brand-primary-color)
}

@media (max-width: 767px) {
    .title--content-4 .title__title {
        font-size: 1.4rem;
        line-height: 2rem
    }
}