div.ps-s3-b-wp {
    position: relative;
    margin: 5px auto 20px 0px;
    width: 98%;
    float: left;
    clear: both;
    border: 1px solid transparent;
    transition: all .3s; 
}

img.ps-s3-b-img {
    position: relative;
    margin: 18px auto;
    width: 64px;
    height: 64px;
    float: left;
    clear: both;
}

span.ps-s3-b-s {
    position: relative;
    font-family: Play;
    font-size: 32px;
    font-weight: bold;
    color: #9996F1;
    float: left;
    clear: both;
}

ul.ps-s3-ul {
    position: relative;
    margin: 25px auto;
    list-style: inside;
    float: left;
    clear: both;
}

ul.ps-s3-ul li {
    /* padding-left: 51px; */
    line-height: 40px; 
    font-family: Play;
    font-size: 24px;
    color: #001117;
    
    list-style-position: inside;
    list-style: none;

    position: relative;

    --marker-size: 9px;
    --gap-right: 10px;
    --gap-left: 10px;

    padding-left: calc(var(--marker-size) * 2 + var(--gap-right) + var(--gap-left));

}

ul.ps-s3-ul li::before {
    content: '';
    width: var(--marker-size);
    height: var(--marker-size);
    background-color: #001117;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    top: 16px; /* top: calc(50% - calc(var(--marker-size) / 2)); */
    left: calc(var(--marker-size) / 2 + var(--gap-left));
}

span.ps-s3-ul-li-b {
    font-weight: bold;
}

/*
 * Further Media screen follow ----------------------------
 */

 /* @media (max-width: 1800px) {} */

 /* @media (max-width: 1440px) {} */

 /* @media (max-width: 1360px) {} */

 @media (max-width: 1280px) {

    div.ps-s3-b-wp { margin: 5px auto 20px 165px; }

 }

 @media (max-width: 1200px) {

    div.ps-s3-b-wp { margin: 5px auto 20px 125px; }

 }

 @media (max-width: 1128px) {

    div.ps-s3-b-wp { margin: 5px auto 20px 105px; }

    /* img.ps-s3-b-img {} */

    /* span.ps-s3-b-s {} */

    /* ul.ps-s3-ul {} */

    ul.ps-s3-ul li { line-height: 38px; font-size: 23px; }

    /* ul.ps-s3-ul li::before {} */

    /* span.ps-s3-ul-li-b {} */

 }

 @media (max-width: 1024px) {

    div.ps-s3-b-wp { margin: 5px auto 10px 0px; }

    ul.ps-s3-ul li { line-height: 38px; font-size: 20px; }

 }

 /*
 @media (max-width: 990px) {}

 @media (max-width: 960px) {}

 @media (max-width: 864px) {}

 @media (max-width: 800px) {}

 @media (max-width: 768px) {}
 */

 @media (max-width: 750px) {
 
    span.ps-s3-b-s { font-size: 27px; }

 }
 
 /* @media (max-width: 718px) {} */
 

 @media (max-width: 640px) {

    div.ps-s3-b-wp { line-height: 35px; }

    span.ps-s3-b-s { font-size: 27px; }

    ul.ps-s3-ul { margin: 20px auto; }

    ul.ps-s3-ul li { line-height: 36px; font-size: 19px; --marker-size: 7px; }

 }

 /*
 @media (max-width: 600px) {}
 @media (max-width: 540px) {}
 @media (max-width: 500px) {}
 @media (max-width: 480px) {}
 */

 @media (max-width: 450px) {

    div.ps-s3-b-wp { width: 94%; }

 }

 @media (max-width: 414px) {

    div.ps-s3-b-wp { line-height: 30px; }

    span.ps-s3-b-s { font-size: 26px; }

    ul.ps-s3-ul li { line-height: 34px; font-size: 18px; }

 }

 /* 
 @media (max-width: 412px) {}
 @media (max-width: 411px) {}
 @media (max-width: 400px) {}
 @media (max-width: 375px) {}
 @media (max-width: 360px) {}
 @media (max-width: 340px) {}
 @media (max-width: 320px) {}
 @media (max-width: 280px) {}
 */