/* Article components share the site's type scale and utilities. Static-page
   banners keep their own selectors in main.css. */
.article-layout--no-sidebar { grid-template-columns: minmax(0, 1fr); }
.article-editorial { color: var(--color-text-default); padding-bottom: 0; line-height: normal; }
.article-editorial p, .article-editorial li { line-height: 1.5rem; }
.article-editorial__body { padding-block: 48px; }
.article-editorial__body--sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 48px; }
.article-editorial__content, .article-editorial__section { min-width: 0; }
.article-editorial__section + .article-editorial__section { margin-top: 40px; }
.article-editorial__heading { margin-bottom: 24px; }
.article-editorial__heading p { margin-block: 12px; }
.article-editorial .article-editorial__heading h2 { color: inherit; }
.article-banner { position: relative; isolation: isolate; }
.article-banner__image { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.article-banner__content { position: relative; min-height: 50vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.article-banner__text { margin-inline: 10px; padding: 32px 20px; max-width: 600px; color: #000; text-align: center; background: rgb(255 255 255 / 90%); }
.guide-page .article-banner__text h1 { color: #000; font-weight: 700; font-size: var(--text-page-title); line-height: normal; margin: 0; }
.article-banner__breadcrumbs { position: absolute; inset: 0; pointer-events: none; }
.article-banner__breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 24px 12px; margin: 0; }
.article-banner__breadcrumbs li { color: #fff; line-height: 1.5rem; }
.article-banner__breadcrumbs a { color: #fff; text-decoration: none; pointer-events: auto; }
.article-banner__breadcrumbs li + li::before { content: '/'; padding-inline: 5px; }
@media (min-width: 768px) { .guide-page .article-banner__text h1 { font-size: 60px; } }
@media (max-width: 991px) {
    .article-banner__breadcrumbs ol { padding-inline: 8px; }
    .article-editorial__body--sidebar { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 767px) {
    .guide-page .article-banner__text h1 { font-size: var(--text-heading); }

}