ul{
    list-style: none;
    counter-reset: list;
    color: var(--articleText);
    position: relative;
    padding: 15px 0 30px 30px;
    -webkit-transition: var(--color-mode-transition);
    -o-transition: var(--color-mode-transition);
    transition: var(--color-mode-transition);
    margin: 0 auto;
    font-size: 18px;
  
    width: 100%;
    max-width: 680px;
}

/*DESKTOP*/
@media screen and (max-width: 1070px){
    ul{
        max-width: 507px;
    }
}

/*TABLET*/
@media screen and (max-width: 735px){
    ul{
        max-width: 486px;
        padding-left: 0px;
    }
}

/*PHABLET*/
@media screen and (max-width: 540px){
    ul{
        padding-left: 20px;
    }
}

li{
    position: relative;
    padding-bottom: 15px;
}

/*TABLET*/
@media screen and (max-width: 735px){
    ul li{
        padding-left: 30px;
    }

    ul li p{
        padding: 0;
    }
}

/*PHABLET*/
@media screen and (max-width: 540px){
    ul li{
        padding-left: 30px;
    }
}

ul li > *{
    display: inline;
}

ul li::before{
    width: 3rem;
    display: inline-block;
    position: absolute;
    color: var(--articleText);
    content: "";
    position: absolute;
    left: -30px;
    top: 8px;
    height: 8px;
    width: 8px;
    background: var(--articleText);
}

/*TABLET*/
@media screen and (max-width: 735px){
    ul li::before{
        left: 0;
    }
}

ol{
    list-style: none;
    counter-reset: list;
    color: var(--articleText);
    position: relative;
    padding: 15px 0 30px 30px;
    margin: 0 auto;
    -webkit-transition: var(--color-mode-transition);
    -o-transition: var(--color-mode-transition);
    transition: var(--color-mode-transition);
    font-size: 18px;
    width: 100%;
    max-width: 680px;
}

/*DESKTOP*/
@media screen and (max-width: 1070px){
    ol{
        max-width: 507px;
    }
}

/*TABLET*/
@media screen and (max-width: 735px){
    ol{
        max-width: 486px;
        padding-left: 0px;
    }
}

/*PHABLET*/
@media screen and (max-width: 540px){
    ol{
        padding-left: 20px;
    }
}

ol li{
    position: relative;
    padding-bottom: 15px;
}

/*TABLET*/
@media screen and (max-width: 735px){
    ol li{
        padding-left: 30px;
        padding: 0;
    }
    ol li p{
        padding-left: 30px;
    }
}

/*PHABLET*/
@media screen and (max-width: 540px){
    ol li{
        padding-left: 30px;
    }
}

ol li > *{
    display: inline;
}

ol li::before {
    width: 3rem;
    display: inline-block;
    position: absolute;
    color: var(--articleText);
    counter-increment: list;
    content: counter(list) ".";
    font-weight: 600;
    position: absolute;
    left: -3rem;
    top: -0.3rem;
    font-size: 2rem;
}

@media screen and (max-width: 735px){
    ol li::before{
        left: 0;
    }
}