.articles-item {
    margin-bottom: 2rem;
}

.articles-thumb{width:100%; aspect-ratio:16/12; background: var(--color-bg-gray);}
.articles-thumb__image, .articles-thumb__link{display:block; width:100%; height:100%;}
.articles-item__title{line-height:1.3;}

.read-container {
    max-width: 60rem;
    margin: 0 auto;
}
.image figcaption{font-style:italic; opacity: .7; margin:.5rem 0;}
.read-container h1,
.read-container h2,
.read-container h3,
.read-container h4,
.read-container h5{text-wrap: balance;}
.read-container h1,
.read-container h2,
.read-container h3,
.read-container h4,
.read-container h5,
.read-container .image,
.read-container_wrap {
    max-width: 40rem;
    margin: 0 auto;
    line-height: 1;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.read-container h1 {
    font-size: 2rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.read-container h2 {
    margin-bottom: .75rem;
}
.read-container h3 {
    margin-bottom: .5rem;
}

.read-container h2 {
    font-size: 2rem;
}

.read-container h3 {
    font-size: 1.5rem;
    line-height:1.3;
}

.read-container h4 {
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom:.5rem;
}

.read-container h5 {
    font-size: 1rem;
}

.read-content table td, .read-content table th{border-color:var(--color-ghost);}
.read-content p,
.read-content ul,
.read-content ol, 
.read-content blockquote {
    max-width: 40rem;
    margin: 0 auto;
    margin-bottom: 1rem;
}

.read-content ul li,
.read-content ol li {
    margin: 0;
    margin-bottom: 1rem;
}
.read-content li>ol, .read-content li>ul {
   margin-top:.75rem;
}
.read-content .no-margin{margin-bottom:.5rem;}

.read-container .content__wrap {
    margin-top: 2rem;
    margin-bottom: 4rem;
    padding: 2rem;
    background: var(--color-bg-accent-ghost)
}

.read-content a {
    font-weight: bold;
    color: var(--color-brand);
    text-underline-offset: .25em;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--color-brand-hover);
    transition: background-position .4s ease, color .4s ease;
    background-position: 0 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, var(--color-bg-accent) 50%);
    background-size: 100% 200%;
}

.read-content a:where(:hover, :focus-visible) {
    background-position: 0 100%;
    text-decoration-color: var(--color-bg-accent);
    color: var(--color-base);
}
.content__block{margin-bottom:2rem;}
.content__block--brand a{color:rgba(255,255,255,.75)}
.content__block--brand a:where(:hover, :focus-visible){color: var(--color-base);}

.content__wrap h2 {
    margin-top: 1rem;
}

.article-cover {
    max-width: 60rem;
    margin: auto;
}

.article-cover__image {
    max-width: 100%;
}

.read-container video {
    max-width: 100%;
    display: block;
    margin: 2rem auto;
}

.article-top {
    display: flex;
    margin-top: 2rem;
    margin-bottom: -2rem;
}

.article-top__col:not(:last-child) {
    padding-right: 1rem;
}

.compare-block {
    margin: 1rem 0 2rem;
}

.compare-block__card {
    padding: 0;
    margin-bottom: 1rem;
}

.compare-block__card ul {
    padding-left: 1.5rem;
}

.compare-block__card ul li {
    position: relative;
    list-style-type: disc;
}

.compare-block__card ul li::marker {
    font-size: 1.5rem;
    margin-top:5px;
    line-height:1;
}

.compare-block__card h3 {
    margin-top: 1rem;
}
.compare-block__card{margin-bottom:2rem;}
.compare-block__card ul li{margin-bottom:.25rem;}
.compare-block__card--good ul li::marker {
    color: var(--color-brand);
}

.compare-block__card--bad>p:first-child{margin-bottom:.5rem; color: #cf6857}

.compare-block__card--bad ul li::marker {
    color: #cf6857;
}

.compare-block__card--bad>p:first-child,
.compare-block__card--bad h3,
.compare-block__card--bad h4{
    margin-bottom:.5rem;
    font-size:1.25rem; font-weight: bold;
    color: #cf6857;
}

.compare-block__card--good>p:first-child,
.compare-block__card--good h3,
.compare-block__card--good h4 {
    margin-bottom:.5rem;
    font-size:1.25rem; font-weight: bold;
    color: var(--color-brand);
}

.article-panel {
    display:flex; align-items:center;
    flex-wrap:wrap;
    margin-bottom: 2rem;
    margin-top: -.5rem;
}

.article-panel__col{display:inline-flex; align-items:center; gap:.375rem; padding:.5rem 1rem .5rem 0;}
.article-panel__col svg{opacity:.5; margin-top:-2px;}

.article-category__label {
    padding: 4px 8px;
    border-radius: 1rem;
    background-color: var(--color-bg-accent);
}

.article-header .breadcrumbs__list {
    justify-content: flex-start;
    flex-wrap: nowrap;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-header .breadcrumbs__end {
    display: inline;
}

.artice-subtitle{font-size:1.25rem; line-height:1.2; font-weight:bold;}

.content-note p{border-left:4px solid var(--color-bg-accent-opacity); padding:1rem; margin-top:2rem; margin-bottom:2rem; font-size:1.125em;}
.content-danger{background:#ffe8e8; padding:1rem; margin-top:1rem; margin-bottom:1rem;}

.share-content{margin-left:auto;}
.share-content__btn{padding:.5rem;}
.share-content__btn>span{ display:none; }

.advice-text{padding-left:1rem; margin-top:1.5rem!important; margin-bottom:1.5rem!important; font-style:italic; border-top:1px solid var(--color-bg-accent-light); border-bottom:1px solid var(--color-bg-accent-light); padding-top:1.5rem; padding-bottom:1.5rem;}
.advice-text strong{display:flex; align-items: center; color:var(--color-bg-accent); margin-left:-1rem;}
.advice-text strong::before{content:''; display:inline-block; width:1.5rem; height:1.5rem; background:url(../img/icons/lamp.svg) no-repeat 50% 50%; background-size:contain; margin-right:.5rem; margin-top:-6px;}
.read-container p>img{margin:2rem 0;}

.plus-text strong{color:var(--color-brand); position: relative; padding-left:1.25rem;}
.plus-text strong::before, .minus-text strong::before{content:''; display:inline-flex; align-items: center; justify-content: center; font-size:.5rem; color:#fff; height:.75rem; width:.75rem; position:absolute; top:5px; left:0; border-radius: 50%;}
.plus-text strong::before{content:'+'; background:var(--color-brand);}
.minus-text strong{color:#cf6857; position: relative;  padding-left:1.25rem;}
.minus-text strong::before{content:'-'; background:#cf6857;}

.navs-list__item{margin-bottom:.5rem;}
.navs-list__link:hover{color:var(--color-brand); font-weight: bold;}


.faq-section{background:var(--color-bg-gray); padding:2rem 0; margin:3rem 0;}
.faq-section__wrap{max-width:60rem; margin:1rem auto;}
.faq-section__title{font-size:2rem; line-height:1.2;}

@media screen and (min-width:47em) {
    .read-container h1 {
        font-size: 3rem;
    }
    .compare-block {
        margin-bottom: 2rem;
    }
    .article-panel {
        margin-bottom: 3rem;
    }
    .article-header .breadcrumbs__list {
        max-width: 60rem;
        margin: 0 auto;
    }
    .articles-item__title {
        font-size: 1.25rem;
    }
    .read-content table,
    .read-content p,
    .read-content ul,
    .read-content ol, 
    .read-content blockquote {
        margin-bottom: 1.5rem;
    }
    .read-content blockquote {padding-left:3rem;}
    .read-content .no-margin{margin-bottom:.5rem;}
    .read-content table{font-size:1rem;}

    
    .content-note p{padding:1rem 2rem;}

    .share-content{margin-left:0;}
    .share-content__btn>span{display:block;}

    .content-danger{padding:2rem; margin-top:2rem; margin-bottom:2rem;}
}

@media screen and (min-width:63em) {
    .faq-section{margin:4rem 0; padding:4rem 0;}
    .faq-section__wrap{max-width:60rem; margin:2rem auto;}
    .faq-section__title{font-size:2.5rem; line-height:1.1;}

    .content__block{margin-top:4rem; margin-bottom:4rem;}
}
@media screen and (min-width:100em) {
    
.advice-text{padding-left:2rem;}
.advice-text strong{margin-left:-2rem;}
    .read-container {
        font-size: 1.125em;
    }
    .read-container h1 {
        font-size: 4rem;
    }
    .read-container h1.title-small {
        font-size: 2.75rem;
    }
    .read-container h2 {
        line-height:1.1;
    }
}