/* =============================
   opinion.css   
   ============================= */

.page__layout--opinion [class*="cate"] { 
	color: var(--text-opinion);
}

.page__layout--opinion section + section { 
    margin-top: 7rem;
}

.opinion-hero__main .article-list {     
    padding: 30px; 
    background: var(--background-darklight);
    border: 1px solid #F5F5F5;   
    border-radius: 8px;
}

.opinion-hero__aside .article-list {
    display: grid;
    gap: 24px;
}
.opinion-hero__aside .article-list--small .article-list__item:not(:first-child)::before { 
	content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--stroke-separator);
}

.opinion-hero__aside .article-list__thumb { 
    width: 74px;
    height: 74px;
    background-color: var(--background-opinion);
}

.opinion-hero__aside .article-list__cate { 
    bottom: 52px;
    color: var(--text-impact);
}

.opinion-hero__aside .article-list__title { 
    margin-top: 2.6rem !important;
    word-break: keep-all;
}

.opinion-pick .opinion-pick__list { 
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem 3.6rem;
}

.opinion-pick .profile-card__wrap { 
    padding: 3.4rem 3rem;
}

.opinion-pick .article-list__title {     
    font-size: 1.8rem;
}

.opinion-pick .article-list__thumb { 
    width: 76px;
    height: 76px;
}

.column-internal .article-list--small { 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 3.6rem;
}

.column-internal .article-list__item:nth-child(n + 4) { 
    position: relative;
}

.column-internal .article-list__item:nth-child(n + 4)::before { 
    content: '';
    position: absolute;
    top: -20px; 
    left: 0;
    right: 0;
    height: 1px;
    background: var(--stroke-separator);
}

.column-external .article-list--small { 
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.8rem 2.4rem;
}

.column-external .article-list__title { 
    margin-top: 0 !important;
}

.column-external .article-list__cate {   
    top: unset;  
    bottom: 2px;    
    color: var(--text-description);
}

.column-external .article-list__body {     
    flex-grow: 1;
}

@media (max-width: 1024px) { 
    .column-external .article-list--small { 
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) { 
    .page__layout--opinion section + section { 
        margin-top: 3.6rem;
    }
    .opinion-pick .opinion-pick__list { 
        grid-template-columns: 1fr;
    }
    .opinion-hero__main .article-list--vertical .article-list__link { 
        display: block;
    }
    .opinion-hero__main .article-list--vertical .article-list__thumb { 
        width: auto;
        height: auto;
        border-radius: 8px;
    }
    .opinion-hero__main .article-list { 
        padding: 2rem 2rem;
        border-radius: 12px;
    }
    .opinion-hero__main .article-list--vertical .article-list__body { 
        margin-top: .8rem;
    }
    .opinion-hero__main .article-list--vertical .article-list__title { 
        font-size: 2.2rem;
        line-height: 1.34;
    }
    .opinion-hero__main .article-list--vertical .article-list__item:not(:first-child) { 
        margin-top: 1.8rem;
        padding-top: 1.8rem;
    }
    .opinion-hero__aside { 
        margin: 0 -20px;
        padding: 0 20px;
        overflow: hidden;        
    }
    .opinion-aside__slide .article-list { 
        display: flex;
        gap: unset;
    }
    .opinion-hero__aside .article-list--small .article-list__item:not(:first-child)::before { 
        content: none;
    }
    .opinion-aside__slide .article-list__item { 
        width: 65%;
    }
    .opinion-hero__aside .article-list--small .article-list__link { 
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .opinion-hero__aside .article-list__thumb { 
        order: 0;
        width: 74%;
        height: 74%;
        anchor-name: --thumb;
    }
    .opinion-hero__aside .article-list--small .article-list__body { 
        order: 1;
    }
    .opinion-hero__aside .article-list__cate {         
        top: calc(anchor(--thumb bottom) + 8px);
        right: 0;
        bottom: unset;
        left: 0;
        max-width: unset;
        text-align: center;
    }
    .opinion-hero__aside .article-list--small .article-list__item + .article-list__item { 
        margin: 0;
        padding: 0;
        border: none;
    }    
    .opinion-hero__aside .article-list__title { 
        margin: 0 auto;
        width: 80%;    
        text-align: center;    
        line-height: 1.34;
    }
    .opinion-pick .profile-card__wrap { 
        padding: 2rem;
    }
    .opinion-pick .article-list__title { 
        font-size: 1.7rem;        
    }
    .opinion-pick .article-list__cate { 
        top: 0;
        bottom: unset;
    }    
    .opinion-pick .article-list__thumb { 
        width: 74px;
        height: 74px;
    }
    .column-internal .article-list--small { 
        grid-template-columns: 1fr;
        row-gap: 2.8rem;
    }
    .column-internal .article-list__item:not(:first-child)::before { 
        content: '';
        position: absolute;
        top: -14px;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--stroke-separator);
    }
    .column-external .article-list--small { 
        grid-template-columns: 1fr;
    }    
    .column-external .article-list__item:not(:first-child)::before { 
        content: '';
        position: absolute;
        top: -14px;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--stroke-separator);
    }
    
    
}