#section__content{ margin-left: 28mm; h1, h2, h3 { &::before{ content: attr(data-counter); } } h4, h5, h6{ &::before{ content: attr(data-counter) ". "; } } h1, h2, h3 , h4{ break-inside: avoid; break-after: avoid; text-wrap: balance; /* hack for avoiding break-after */ margin-bottom: calc(var(--baseline)*-3); &::after{ content: ''; display: block; height: calc(var(--baseline)*3); } } h5, h6 { break-inside: avoid; break-after: avoid; text-wrap: balance; /* hack for avoiding break-after */ margin-bottom: calc(var(--baseline)*-2); &::after{ content: ''; display: block; height: calc(var(--baseline)*2); // background-color: rgba(255, 255, 0, 0.595); } } h1 + ol + p, h2 + ol + p, h3 + ol + p, h4 + ol + p, h5 + ol + p, h6 + ol + p{ text-indent: 0; } h2{ font-family: var(--font-title); font-size: 1.1rem; font-weight: 500; text-transform: uppercase; line-height: calc(var(--baseline)*1.2); position: relative; margin-top: calc(var(--baseline)*1 + 6px); padding-bottom: calc(var(--baseline)*1); padding-right: 2ch; padding-left: calc(var(--indent)*2); &::before{ position: absolute; left: 0; // display: block; // font-size: var(--fs-num); // padding-left: var(--indent); } } h3{ font-family: var(--font-title); font-weight: 500; font-size: 1rem; line-height: calc(var(--baseline)*1); // padding-left: var(--indent); padding-right: calc(var(--indent)*2); position: relative; margin-top: calc(var(--baseline)*1 + 4px); padding-bottom: calc(var(--baseline)*0.75); padding-left: calc(var(--indent)*2); &::before{ position: absolute; left: 0; } } h4{ font-family: var(--font-title); font-weight: 500; font-size: 0.9rem; line-height: calc(var(--baseline)*1); padding-right: calc(var(--indent)*2); position: relative; margin-top: calc(var(--baseline)*1 + 4px); padding-bottom: calc(var(--baseline)*0.75); text-decoration: underline 1px #cfcfcf; text-underline-offset: 3px; padding-left: calc(var(--indent)*2); &::before{ // position: absolute; // left: 0; } } h5{ font-family: var(--font-title); font-weight: 500; font-size: 0.8rem; line-height: calc(var(--baseline)*1); padding-left: calc(var(--indent)*2); // padding-right: calc(var(--indent)*2); position: relative; margin-top: calc(var(--baseline)*1 + 4px); padding-bottom: calc(var(--baseline)*0.25); } h6{ font-family: var(--font-title); font-weight: 500; font-size: 0.8rem; margin-top: calc(var(--baseline)*0.5); padding-bottom: calc(var(--baseline)*0.25); color: #666; } } [data-id="section__content"][data-split-from] > :first-child { margin-top: 0; } h1{ font-family: var(--font-title); font-size: 1.6rem; font-weight: 500; text-transform: uppercase; line-height: calc(var(--baseline)*1.6); // text-align: center; position: relative; margin-top: calc(var(--baseline)*2 - 3px); padding-bottom: calc(var(--baseline)*1); padding-left: calc(var(--indent)*2); padding-right: 1ch; &::before{ // font-size: var(--fs-num); // width: 2ch; // height: 2ch; // border: 1px solid currentColor; // border-radius: 50%; // display: flex; // align-items: center; // justify-content: center; position: absolute; left: 0; width: calc(var(--indent)*2 - 0.5ch); // border-bottom: 2px solid #cfcfcf; // top: 3px; } } section h1:first-of-type{ margin-top: 3px!important; }