.article-section {
    color: var(--meb-blog-text-on-section-default);
}


.article-section--highlight,
.article-section--sky,
.article-section--mint,
.article-section--coral,
.article-section--ink {
    border: var(--meb-border-width-sm) solid var(--meb-blog-border-section);
    border-radius: var(--meb-blog-radius-section);
    box-shadow: var(--meb-blog-shadow-section);
    padding: var(--meb-space-stack-md) var(--meb-space-inline-20);
}


@media (max-width: 767px) {
    .article-section--highlight,
    .article-section--sky,
    .article-section--mint,
    .article-section--coral,
    .article-section--ink {
        padding: var(--meb-space-stack-12) var(--meb-space-inline-md);
    }
}

.article-section--highlight {
    background: var(--meb-blog-surface-section-highlight);
    color: var(--meb-blog-text-on-section-highlight);
}
.article-section--sky {
    background: var(--meb-blog-surface-section-sky);
    color: var(--meb-blog-text-on-section-sky);
}
.article-section--mint {
    background: var(--meb-blog-surface-section-mint);
    color: var(--meb-blog-text-on-section-mint);
}
.article-section--coral {
    background: var(--meb-blog-surface-section-coral);
    color: var(--meb-blog-text-on-section-coral);
}
.article-section--ink {
    background: var(--meb-blog-surface-section-ink);
    color: var(--meb-blog-text-on-section-ink);
}


.article-section--highlight a { color: var(--meb-blog-text-section-link-highlight); }
.article-section--sky       a { color: var(--meb-blog-text-section-link-sky); }
.article-section--mint      a { color: var(--meb-blog-text-section-link-mint); }
.article-section--coral     a { color: var(--meb-blog-text-section-link-coral); }
.article-section--ink       a { color: var(--meb-blog-text-section-link-ink); }


.article-hero-container--highlight { --meb-blog-surface-hero: var(--meb-blog-surface-section-highlight); }
.article-hero-container--sky       { --meb-blog-surface-hero: var(--meb-blog-surface-section-sky); }
.article-hero-container--mint      { --meb-blog-surface-hero: var(--meb-blog-surface-section-mint); }
.article-hero-container--coral     { --meb-blog-surface-hero: var(--meb-blog-surface-section-coral); }
.article-hero-container--ink {
    --meb-blog-surface-hero: var(--meb-blog-surface-section-ink);
    --meb-blog-text-title: var(--meb-blog-text-on-section-ink);
    --meb-blog-text-subtitle: var(--meb-blog-text-on-section-ink);
    --meb-blog-text-back: var(--meb-blog-text-on-section-ink);
}


.article-section--image-left,
.article-section--image-right {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--meb-space-inline-20);
}


.article-section--image-left > .section-figure {
    order: 0;
    flex: 0 0 auto;
    max-width: 40%;
}
.article-section--image-left > .section-text {
    order: 1;
    flex: 1 1 auto;
    min-width: 0; 
}
.article-section--image-right > .section-figure {
    order: 1;
    flex: 0 0 auto;
    max-width: 40%;
}
.article-section--image-right > .section-text {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
}


.section-figure img {
    max-width: 100%;
    height: auto; 
}


.section-figure.section-video video {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--clip-aspect, 16 / 9);
    max-height: 60vh;
    object-fit: contain;
    margin-inline: auto;
}


.article-section--image-left > .section-figure.section-video,
.article-section--image-right > .section-figure.section-video {
    flex-basis: min(40%, calc(60vh * var(--clip-aspect, 16 / 9)));
}


.seo-primary-nav {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}


.blog-standalone-layout {
    
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--meb-blog-font-family-body);
}

.blog-standalone-layout h1,
.blog-standalone-layout h2,
.blog-standalone-layout h3,
.blog-standalone-layout h4,
.blog-standalone-layout h5,
.blog-standalone-layout h6,
.blog-standalone-layout .title,
.blog-standalone-layout .article-title,
.blog-standalone-layout .section-title {
    font-family: var(--meb-blog-font-family-heading);
}