.article_detail{
    background-color: var(--light-blue-bg);
}

.article_detail header .container-fluid,
.article_detail .content,
.article_detail article,
.article_detail footer{
    background-color: #FFF;
}

.article_detail .content{
    border-radius: 0 0 24px 24px;
}

.article_detail article{
    border-radius: 24px 24px 0 0;
    margin-top: 20px;
}

.article_detail article .article-detail__body{
    max-width: 1113px;
}

.article_detail .content .container-fluid{
    display: grid;
}

.article_detail .article-detail__image img{
    border-radius: 12px;
}

.article_detail h2{
    scroll-margin-top: var(--header-height);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.article_detail .article-detail__toc h2{
    margin-top: 0;
    margin-bottom: 2rem;
}

.article_detail .article-detail__toc ul{
    list-style: inside none;
    padding: 0;
    margin-bottom: 2rem;
    line-height: 2em;
}

.article_detail .article-detail__toc a{
    color: var(--text-color);
    font-weight: 700;
    text-decoration: underline;
}

.article_detail .article-detail__references ol{
    list-style: outside decimal;
}

@media screen and (min-width: 640px){
    .article_detail .warning{
        line-height: 2rem;
    }
}

@media screen and (min-width: 768px){
    .article_detail .article-detail__image img{
        border-radius: 24px;
    }
}

/* элементы оформления */
.article_detail .warning{
    color: #FFF;
    background: url("/img/warning.svg") 12px center no-repeat var(--base-blue);
    padding: 8px 8px 8px 62px;
    border-radius: 8px;
}

.gray_container{
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 12px;
}

.article-detail__content > img,
.article-detail__content > div,
.article-detail__content > p{
    margin-bottom: 1rem;
}

@media (min-width: 768px){
    .gray_container.gc-column2{
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px){
    .gray_container.gc-column3{
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.gray_item{
    background-color: var(--light-blue-bg);
    border-radius: 16px;
    padding: 16px;
}

.gray_item strong{
    display: block;
}

.gc-icon .gray_item{
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-gap: 20px;
}

.gc-card .gray_item{
    padding: 0;
    display: grid;
    grid-gap: 0;
    align-content: start;
}

.gc-card .gray_item > :nth-child(2){
    padding: 20px;
    margin: 0;
}


.article_detail .table_common{
    border-width: 1px;
    border-style: solid;
    border-color: #DADADA;
    border-collapse: collapse;
    box-shadow: 0 1px 5px #DDD;
    margin-bottom: 1em;
}

.article_detail .table_common td,
.article_detail .table_common th{
    border-bottom: 1px solid #DADADA;
    border-right: 1px solid #DADADA;
    padding: 3px 5px;
    text-align: left;
    vertical-align: top;
}

.article_detail .table_common tr:nth-child(even){
    background-color: #F8F8FF;
    min-height: 31px;
}

.article_detail .table_common tr:nth-child(odd){
    background-color: #F0F0FF;
    min-height: 31px;
}

.article_detail .table_common th,
.article_detail .table_common thead td,
.article_detail .table_common thead th,
.article_detail .table_common tr.header td{
    font-weight: bold;
    background-color: var(--base-blue);
    font-size: 110%;
    color: #FFF;
    padding: 5px;
    height: 38px;
}

.article_detail p.strong{
    font-weight: bold;
}


@media screen and (min-width: 992px){
    .content .container-fluid{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        /*@formatter:off*/
        grid-template-areas:
            "bc bc"
            "h1 img";
        /*@formatter:on*/
        grid-gap: 16px;
    }

    .content .breadcrumbs{
        display: flex;
        grid-area: bc;
    }

    .content h1{
        grid-area: h1;

        --fs-min: 28;
        --fs-max: 52;
        --vw-min: 992;
        --vw-max: 1800;

        align-self: center;
    }

    .content div.article-detail__image{
        grid-area: img;
        aspect-ratio: 90 / 55;
    }

    .content div.article-detail__image img{
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
        /*object-fit: contain;*/
        object-position: center;
    }
}