.article-hero-wrapper {
    margin: 0 auto;
    max-width: 100%;
}

main .section.article-hero-container {
    padding: 0;
}

body:has(.article-banners-stack) main > .section:first-child.article-hero-container,
body:has(.article-banners-stack) main > .section.article-hero-container {
  padding: 0;
  margin-top: calc(-1 * var(--header-bottom-margin) + var(--article-banner-actual-height));
}

main:has(.article-banner-container) > .section:first-child.article-hero-container,
main:has(.article-banner-container) > .section.article-hero-container {
  padding: 0;
  margin-top: calc(-1 * var(--header-bottom-margin) + var(--article-banner-actual-height));
}

main > .section:first-child.article-hero-container,
main > .section.article-hero-container {
  padding: 0;
  margin-top: calc(-1 * var(--header-bottom-margin));
}

.article-hero-block-container {
    background: var(--color-charcoal-brand);
    color: var(--color-gray-cool);
}

.article-hero-content {
    display: flex;
    align-items: flex-start;
    gap: var(--size-16);
    flex-direction: column;
    max-width: var(--container-size);
    margin: 0 auto;
    padding: 112px 0 32px;
}

.article-hero-text {
    flex: 1 0 0;
}

.article-hero-image {
    order: -1;
    width: 100%;
}

.article-hero-title {
    color: var(--color-gray-cool);
    font-size: var(--size-40);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    text-align: left;
    margin: 0 0 var(--size-8) 0;
}

.article-hero-description {
    color: var(--color-gray-cool);
    font-size: var(--size-16);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: var(--size-24);
}

.article-metadata-section {
    display: flex;
    align-items: center;
    gap: var(--size-32);
    margin-bottom: var(--size-24);
    margin-top: var(--size-24);
}

.article-metadata-section .meta-item {
    display: flex;
    align-items: center;
    gap: var(--size-8);
}

.article-metadata-section .meta-icon {
    width: 13px;
    height: 14px;
    aspect-ratio: 13/14;
    fill: var(--color-white);
}

.article-metadata-section .meta-item .time {
    color: var(--color-white);
    font-size: var(--size-16);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: var(--size-24);
    margin: 0;
}

.article-author-section {
    display: flex;
    align-items: center;
    gap: var(--size-8);
}

.article-author-section .author-details {
    display: flex;
    align-items: center;
    gap: var(--size-8);
}

.article-author-section .author-image {
    width: var(--size-32);
    height: var(--size-32);
    aspect-ratio: 1/1;
    border-radius: var(--size-16);
}

.article-author-section .author-name {
    color: var(--color-gray-cool);
    font-size: var(--size-18);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
}

.article-author-section .author-title {
    color: var(--color-gray-cool);
    font-size: var(--size-14);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
}

.article-hero-image img {
    aspect-ratio: 1/1;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--size-12);
}

@media (width >=600px) {
    .article-hero-title {
        font-size: var(--size-44);
    }

    .article-hero-image img {
        aspect-ratio: 4/3;
    }
}

@media (width >=900px) {
    .article-hero-content {
        gap: var(--size-24);
        flex-direction: row;
    }

    .article-hero-image {
        order: 0;
        flex: 1 0 0;
    }

    .article-hero-title {
        font-size: var(--size-56);
    }

    .article-hero-text {
        padding: var(--size-24) 0;
    }
}