/* HERO */
.hero {background:var(--clr-primary); color: #FFF; margin-top: var(--header-h)}
.hero .container {position: relative; z-index: 1; padding-block: 47px 50px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center}
.hero .date {font-size: 2.1rem; font-weight: 600; margin-bottom: 15px}
.hero .title {font-size: 5rem; font-weight: 600}
.hero .media {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center}
.hero .media:before {content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, rgba(0,0,0,.9) 5%, transparent 75%, transparent 100%)}
.hero .source {width: 100%; height: 100%; object-fit: cover}

@media (max-width: 767px) {
	.hero .title {hyphens: auto}
}

@media (min-width: 1200px) {
	.hero .title {width: 66%; font-size: 5rem}
}


.hero.-v2 {position: relative; margin-top: 0; background: var(--clr-dark)}
.hero.-v2 .picture:before {background: rgba(62,80,94,.5)}

@media (max-width: 1199px) {
	.hero.-v2 .container {opacity: 0; height: 371px}
	.hero.-v2 .container > * {display: none}
}

@media (min-width: 1200px) {
	.hero.-v2 .container {min-height: 371px}
}
/* HERO */


/* --------------------------------------------------------------------------- */
/* BREADCRUMB */
.breadcrumb {font-size: 1.4rem}
.breadcrumb .items {display: flex; flex-wrap: wrap; row-gap: 7px}
.breadcrumb .item {display: flex; align-items: center}
.breadcrumb .item:not(:first-child)::before {content: '/'; margin-inline: 7px}
.breadcrumb .link {line-height: 18px}
.breadcrumb .link:hover,
.breadcrumb .link:focus-visible {font-weight: var(--fw-extrabold)}
.breadcrumb.-small {font-size: 1.2rem}
.breadcrumb.-primary .item::before {color: var(--clr-primary)}

@media (min-width: 1400px) {
	.article-grid .breadcrumb {margin-block: 35px 45px}
	.breadcrumb.-small {font-size: var(--fs-label-2);}
}
/* --------------------------------------------------------------------------- */


/* ARTICLE */
@media (min-width: 1200px) {
	.article-grid .aside .list {font-size: 1.2rem;}
}

@media (min-width: 1400px) {
	.article-grid .article {font-size: var(--fs-body-2);}
	.article-grid .article .summary {font-size: var(--fs-body);}
	.article-grid .aside .title {font-size: var(--fs-label);}
	.article-grid .aside .subtitle {font-size: var(--fs-label-2);}
	.article-grid .aside .list {font-size: var(--fs-label-2);}
}
/* ARTICLE */

/* SHARE BAR */
.share-bar .link {color: inherit}

@media (min-width: 1200px) {
	.share-bar {font-size: 2.1rem}
}