@layer recipes {
  .inkeep-heading--size_md {
    font-size: var(--inkeep-font-sizes-xl);
    line-height: 1.2
    }
    .light .inkeep-preview-content-header--variant_title, [data-theme="light"] .inkeep-preview-content-header--variant_title {
      color: var(--inkeep-colors-inkeep-primary-text-subtle)
        }
    .dark .inkeep-preview-content-header--variant_title, [data-theme="dark"] .inkeep-preview-content-header--variant_title {
      color: var(--inkeep-colors-inkeep-primary-lighter)
        }
    .light .inkeep-preview-content-header--variant_title:is(:hover, [data-hover]), [data-theme="light"] .inkeep-preview-content-header--variant_title:is(:hover, [data-hover]) {
      color: var(--inkeep-colors-inkeep-primary-stronger)
        }
    .dark .inkeep-preview-content-header--variant_title:is(:hover, [data-hover]), [data-theme="dark"] .inkeep-preview-content-header--variant_title:is(:hover, [data-hover]) {
      color: var(--inkeep-colors-inkeep-expanded-primary-100)
        }

  @layer _base {
    .inkeep-heading {
      font-family: var(--inkeep-fonts-heading);
      font-weight: var(--inkeep-font-weights-bold)
        }
    }
    @media screen and (min-width: 80em) {

  .xl\:inkeep-heading--size_lg {
      font-size: var(--inkeep-font-sizes-2xl);

      line-height: 1.33
    }

      @media screen and (min-width: 48em) {
        .xl\:inkeep-heading--size_lg {
          font-size: var(--inkeep-font-sizes-3xl);
          line-height: 1.2
                }
            }
        }

  @layer _base {
      .light .inkeep-preview-content-header, [data-theme="light"] .inkeep-preview-content-header {
        color: var(--inkeep-colors-gray-700)
            }
      .dark .inkeep-preview-content-header, [data-theme="dark"] .inkeep-preview-content-header {
        color: var(--inkeep-colors-white-alpha-700)
            }
      .inkeep-preview-content-header .light a:hover, .inkeep-preview-content-header [data-theme="light"] a:hover {
        color: var(--inkeep-colors-inkeep-primary-stronger)
            }
      .inkeep-preview-content-header .dark a:hover, .inkeep-preview-content-header [data-theme="dark"] a:hover {
        color: var(--inkeep-colors-inkeep-expanded-primary-100)
            }
      .inkeep-preview-content-header a:hover {
        text-decoration: none
            }
    }
}