.breadcrumb{padding-bottom:var(--space-3); border-bottom:1px solid; margin-bottom:calc(var(--space-3) * -1); display:flex;}
.breadcrumb-link{text-transform:capitalize;}
.breadcrumb-link:not(:first-child){padding-left:var(--space-2); margin-left:var(--space-2); border-left:1px solid;}

.main-content{display:grid; grid-template-columns:1fr; grid-template-rows:min-content; grid-row-gap:var(--space-4);}

.article-head{display:grid; grid-gap:var(--space-3);}
.article-title{font-size:21px; line-height:140%; font-weight:800; font-weight:bold;}
.article-author{display:grid; grid-template-columns:24px 1fr; grid-gap:var(--space-3);}
.article-author-list{display:flex; align-items:center; flex-wrap:wrap;}
.article-author-name{display:block; line-height:140%; position:relative;}
.article-author-list > li:not(:last-child) .article-author-name{margin-right:var(--space-2); padding-right:var(--space-1);}
.article-author-list > li:not(:last-child) .article-author-name:after{content:','; display:block; position:absolute; bottom:0; right:0;}

.media-article-frame:before{padding-top:56.25%;}
.media-article-frame iframe{position:absolute; top:0; left:0; width:100%; height:100%;}
.media-article-caption{font-size:12px; padding-top:var(--space-1); line-height:140%;}

.content-article-detail{font-size:18px; line-height:160%; display:grid; grid-gap:var(--space-3);
word-wrap:break-word; word-break:break-word; hyphens:auto;}
.content-article-detail .media-article-caption{margin:0;}
.content-article-detail > ul, .content-article-detail > ol{padding-left:20px;}
.content-article-detail > ul{list-style:square;}
.content-article-detail > ol{list-style:decimal;}
.content-article-detail > ul > li, .content-article-detail > ol > li{padding:2px 0;}
.content-article-detail h2, .content-article-detail h3, .content-article-detail h4{font-weight:800; font-size:18px; line-height:140%;}
.content-article-detail b, .content-article-detail strong{font-weight:600;}


@media screen and (min-width:0px) and (max-width:1023px){
  .media-article-caption{margin:0 var(--space-3);}
}

@media screen and (min-width:1024px){
  .article-head{grid-template-columns:1fr auto;}
  .article-title{font-size:34px; line-height:130%; grid-column:1/3;}
  .article-date{grid-column:2/3; grid-row:2/3;}
}