.page-heading{display:flex;align-items:center;gap:12px;padding:13px 16px;background:#f3f4f6;border-bottom:1px solid var(--color-divider)}
.page-heading__icon{width:34px;height:34px;display:grid;place-items:center;background:var(--color-black);color:var(--color-white)}
.page-heading__svg{width:20px;height:20px}
.page-heading__content{min-width:0;flex:1}
.page-heading__line{display:flex;align-items:center;gap:9px;min-width:0}
.page-heading h1{margin:0;font-size:20px;line-height:1.25;letter-spacing:-.01em}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:22px;padding:2px 7px;background:var(--color-black);color:var(--color-white);font-size:12px;font-weight:800;line-height:1}
.page-heading--com{background:#fbeef2}.page-heading--com .page-heading__icon,.page-heading--com .badge{background:var(--color-com)}
.page-heading--pho{background:#fff0f5}.page-heading--pho .page-heading__icon,.page-heading--pho .badge{background:var(--color-pho)}
.page-heading--blue{background:#eef4ff}.page-heading--blue .page-heading__icon,.page-heading--blue .badge{background:var(--color-link)}
@media (max-width:720px){.page-heading{padding-inline:16px}}
@media (max-width:430px){.page-heading{padding:12px 14px}.page-heading h1{font-size:19px}}
@media (max-width:390px){.page-heading{padding:11px 12px;gap:10px}.page-heading__icon{width:32px;height:32px}.page-heading h1{font-size:18px}}