#section__content{ // margin-left: 28mm; h1{ column-span: all; height: $content-h; } h2, h3, h4, h5, h6 { &::before{ content: attr(data-counter); } } 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; } h1{ font-weight: 200; font-size: 115px; line-height: 0.9; hyphens: auto; break-inside: avoid; display: flex; flex-direction: column; justify-content: space-between; text-align: center; span{ display: block; } } h2{ font-size: 22px; font-weight: 200; text-transform: uppercase; text-align: center; line-height: calc(var(--baseline)*1.4); margin-top: 4mm; padding-bottom: 4mm; hyphens: auto; &::before{ display: block; } // &::after{ // content: ''; // display: block; // width: 100%; // border-bottom: 1px solid currentColor; // position: relative; // top: calc(var(--baseline)*-2.5); // opacity: 0.2; // } } h3{ font-weight: 500; font-size: 1em; line-height: calc(var(--baseline)*0.75); position: relative; margin-top: 4mm; padding-bottom: 4mm; padding-left: $indent; text-align: center; &::before{ display: block; } } h4{ font-weight: 500; font-size: 1em; line-height: calc(var(--baseline)*0.75); position: relative; margin-top: calc(var(--baseline)*1); padding-bottom: calc(var(--baseline)*0.5); padding-left: $indent*2; &::before{ display: block; position: absolute; left: $indent; } } h5{ font-weight: normal; font-size: 1em; line-height: calc(var(--baseline)*1); position: relative; margin-top: calc(var(--baseline)*1); padding-bottom: calc(var(--baseline)*0.25); padding-left: $indent; text-indent: $indent; &::before{ display: block; position: absolute; left: 0; } } h6{ font-weight: normal; font-size: 1em; line-height: calc(var(--baseline)*1); position: relative; margin-top: calc(var(--baseline)*1); padding-left: $indent; text-indent: $indent; &::before{ display: block; position: absolute; left: 0; } } } [data-id="section__content"][data-split-from] > :first-child { margin-top: 0; }