#section__content{

   
  

    h1{
        .h1-count::after{
            content: "."
        }

        .h1-count{
            margin-bottom: 1em;
        }
     
        min-height: $content-h;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &[data-split-from]{
            color: red;
            position: absolute;
        }
    }


      h2, h3, h4, h5, h6  {
        color: red;
        &::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: 105px;
        line-height: 0.9;
        hyphens: auto;
        hyphenate-limit-chars: 12 4 3;
    

        span{
            display: block;
        }
        
    }



    

    h2{
        font-size: 22px;
        font-weight: 200;
        text-transform: uppercase;
        text-align: left;
        line-height: calc(var(--baseline)*1.4);
        margin-top: 6mm;
        padding-bottom: 6mm;
        hyphens: auto; 
        margin-left: calc(var(--unit)*1);
        padding-left: calc(var(--unit)*0.5);
        position: relative;
        max-width: calc(var(--unit)*5);
        text-wrap: balance;
        // background-color: red;

        &::before{
            display: block;
            position: absolute;
            left: 0;
    
        }

    }

    

    h3{
        font-weight: 500;
        font-size: var(--fs-medium);
        line-height: 1.1;
        padding-left: calc(var(--unit)*1);
        margin-left: calc(var(--unit)*2);
         padding-left: calc(var(--unit)*0.5);
        position: relative;
        margin-top: 6mm;
        padding-bottom: 6mm;
        margin-right: 8mm;
        &::before{
            display: block;
             position: absolute;
            left: 0;
        }
    }

    h4{
        font-weight: normal;
        font-size: 1em;
        line-height: var(--baseline);
        position: relative;
        margin-top: 6mm;
        padding-bottom: 6mm;
        margin-right: 20mm;
        text-decoration: 0.5px underline;
        text-underline-offset: 3px;
         margin-left: calc(var(--unit)*2);
         padding-left: calc(var(--unit)*0.5);


        &::before{
            display: block;
            position: absolute;
            left: 0;
            // left: calc(var(--unit)*1);
            text-decoration: none;
        }
    }


     h5{
       font-weight: normal;
        font-size: 1em;
        line-height: calc(var(--baseline)*1);
        position: relative;
        top: -2px;
        margin-top: calc(var(--baseline)*1);
        margin-left: calc(var(--unit)*3);
        padding-left: calc(var(--unit)*0.5);
         

        &::before{
            display: block;
            position: absolute;
            left: 0;
        }
    }

    h6{
        font-weight: normal;
        font-size: 1em;
        line-height: calc(var(--baseline)*1);
        margin-top: calc(var(--baseline)*1);
    margin-left: calc(var(--unit)*2);
        //  padding-left: calc(var(--unit)*0.5);
        //  color: red;
         position: relative;
         top: -2px;
        &::before{
            // display: block;
            // position: absolute;
            // left: 0;
        }

    }


    

}

[data-id="section__content"] > .chapter h2:first-child,
[data-id="section__content"] > .chapter h3:first-child,
[data-id="section__content"] > .chapter h4:first-child {
        margin-top: 0;
}