@layer global {
  :root {
    --blog-radius: 4px;

    --blog-article-info-box-radius: var(--blog-radius);
    --blog-article-info-box-background: var(--blog-color-gray-50);
    --blog-article-info-box-title-display: inline;
    --blog-article-info-box-title-font-weight: var(--blog-headline-h4-font-weight);
    --blog-article-info-box-title-mobile-font-size: var(--blog-font-size-lg);
    --blog-article-info-box-title-mobile-line-height: var(--blog-line-height-md);

    --blog-article-gallery-image-height: auto;
    --blog-article-gallery-image-max-width-mobile: 300px;
    --blog-article-gallery-image-radius: 4px;

    --blog-article-layout-justify: space-between;
    --blog-article-title-font-weight: var(--blog-font-weight-extrabold);
    --blog-article-title-font-size: var(--blog-font-size-6xl);
    --blog-article-title-line-height: 74px;
    --blog-article-title-font-size-mobile: 40px;
    --blog-article-title-line-height-mobile: 50px;
    --blog-article-meta-padding: 15px;
    --blog-article-meta-gap: 12px;
    --blog-article-subtitle-font-size: 22px;
    --blog-article-subtitle-font-weight: var(--blog-font-weight-semibold);
    --blog-article-subtitle-line-height: var(--blog-line-height-2xl);
    --blog-article-subtitle-font-size-mobile: var(--blog-font-size-lg);
    --blog-article-subtitle-font-weight-mobile: var(--blog-font-weight-semibold);
    --blog-article-subtitle-line-height-mobile: var(--blog-line-height-lg);
    --blog-article-image-height: auto;
    --blog-article-image-radius: 0;
    --blog-article-separator-margin: 12px;
    --blog-article-separator-color: var(--blog-color-gray-500);
    --blog-article-show-avatar: block;
    --blog-article-author-gap: 12px;
    --blog-article-text-block-font-size: var(--blog-font-size-lg);
    --blog-article-text-block-line-height: var(--blog-line-height-xl);
    --blog-article-author-name-font-size: var(--blog-headline-h4-font-size);
    --blog-article-author-name-font-weight: var(--blog-headline-h4-font-weight);
    --blog-article-author-name-line-height: var(--blog-line-height-2xl);
    --blog-article-author-link-font-weight: var(--blog-font-weight-bold);

    --blog-articles-gap: 20px;

    --blog-article-card-image-radius: 4px;
    --blog-article-card-info-radius: 4px;

    --blog-left-content-max-width: 712px;

    --blog-gap-s: 16px;
    --blog-gap-m: 30px;

    --blog-author-card-avatar-border-radius: 50%;
    --blog-author-card-avatar-width: 180px;
    --blog-author-card-avatar-width-mobile: 140px;

    --blog-button-radius: 32px;
    --blog-button-text-font-weight: var(--blog-font-weight-bold);
    --blog-button-secondary-color: var(--blog-color-blue-900);
    --blog-button-secondary-background: var(--blog-color-white);
    --blog-button-min-width: auto;

    --blog-card-shadow: none;

    --blog-container-max-width: 1180px;
    --blog-container-padding-inline: 20px;

    --blog-headline-font-weight: var(--blog-font-weight-extrabold);


    --blog-main-carousel-title-font-weight: var(--blog-font-weight-bold);
    --blog-main-carousel-max-height: 500px;
    --blog-main-carousel-max-height-mobile: 225px;
    --blog-main-carousel-max-height-mobile-wide: 400px;
    --blog-main-carousel-pagination-bottom: 9px;

    --blog-article-card-max-width: 270px;
    --blog-article-card-max-height: 300px;
    --blog-article-card-border-radius: var(--blog-radius);
    --blog-article-card-border-color: var(--blog-color-gray-300);
    --blog-article-card-description-padding: 15px;
    --blog-article-card-description-gap: 4px;
    --blog-article-card-description-min-height: 130px;
    --blog-article-card-description-font-size: var(--blog-font-size-lg);
    --blog-article-card-description-font-weight: var(--blog-font-weight-extrabold);
    --blog-article-card-description-line-height: var(--blog-line-height-md);
    --blog-article-card-description-font-size-mobile: 24px;
    --blog-article-card-description-line-height-mobile: 30px;
    --blog-article-card-image-height: 170px;

    --blog-articles-by-tag-content-align: flex-start;
    --blog-articles-by-tag-button-align: center;

    --blog-button-background: var(--blog-color-white);
    --blog-button-color: var(--blog-color-primary);
    --blog-button-border: 2px solid var(--blog-color-primary);

    --blog-toc-title-color: var(--blog-color-gray-800);

    --blog-header-submenu-z-index: initial;
    --blog-header-submenu-transform: initial;
    --blog-header-submenu-padding-top: initial;
  }
}