custom-css Title Above Masonry Grid & Custom Bulletpoints

Hi! I'm trying to add a title to my Gallery, and I've been able to do it okay, but I want it to look like the animated title for my desktop version, and I'm not seeing any way to edit the text to do so.

• In the below image, you'll see "Our Work" with a green drawn circle animation (this is what I want) and then "Our Work" below it that is plain. How do I make the plain look like the animated version?
• Furthermore, I've installed custom bullets (image type) via CSS. However, I'm still seeing the standard dot bullet points intermittently while I'm editing. Is this behavior normal or is there a way to prevent it?

@tuanphan Maybe you have some ideas?

Site URL: https://springtail-coyote-2gnb.squarespace.com/home

Site Password: squarespacehelp

Gallery Title Code:

section[data-section-id="6653662cc2a07e35f42e6d12"] .content-wrapper:before {
  content: '';
  color:#000;
  text-align: center;
  padding: 40px 0;
  font-size: 2em;
}
section[data-section-id="6653662cc2a07e35f42e6d12"] .content-wrapper {
  flex-direction: column;  
}

section[data-section-id="6653662cc2a07e35f42e6d12"]::before {
  content: 'Our Work';
  color:#000;
  font-size: 4.5em;
  font-weight: 700;
  display:block;
  width:100%;
  height:100px;
  position: absolute;
  top:0;
  z-index:1;
  margin:auto;
  text-align:center;
  line-height: 80px

Bulletpoint Code:

ul[data-rte-list] li>*:first-child::before {
    content: "";
}

#block-f93d5a1914d70fd60541, #block-yui_3_17_2_1_1716681074846_60832  ul, li {
  list-style-type: none;
}

#block-212501fe4e660f6a5dfb,#block-yui_3_17_2_1_1716681074846_60832   ul, li {
  list-style-type: none;}
  
#block-212501fe4e660f6a5dfb
.sqs-block-content li:before {
    content: '';
    display: block;
    height: 30px;
    position: relative;
    top: 38px;
    left: -40px;
    width: 30px;
    background-image: url(https://static1.squarespace.com/static/652603744296862141add132/t/6650e88f3e0f2c6062a82ec8/1716578448054/CheckListBullet.png);
    background-size: contain;
    margin-right: 5px;
  }

#block-f93d5a1914d70fd60541 .sqs-block-content li:before {
    content: '';
    display: block;
    height: 30px;
    position: relative;
    top: 38px;
    left: -40px;
    width: 30px;
    background-image: url(https://static1.squarespace.com/static/652603744296862141add132/t/6650e88f3e0f2c6062a82ec8/1716578448054/CheckListBullet.png);
    background-size: contain;
    margin-right: 5px;
  }

#block-c156a929be894344c15b .sqs-block-content li:before {
    content: '';
    display: block;
    height: 30px;
    position: relative;
    top: 38px;
    left: -40px;
    width: 30px;
    background-image: url(https://static1.squarespace.com/static/652603744296862141add132/t/6650e88f3e0f2c6062a82ec8/1716578448054/CheckListBullet.png);
    background-size: contain;
    margin-right: 5px;
  }

.accordion-item__description li:before {
    content: '';
    display: block;
    height: 30px;
    position: relative;
    top: 38px;
    left: -40px;
    width: 30px;
    background-image: url(https://static1.squarespace.com/static/652603744296862141add132/t/6650e88f3e0f2c6062a82ec8/1716578448054/CheckListBullet.png);
    background-size: contain;
    margin-right: 5px;
  }


li(inset a right-pointing angled bracket here)*:first-child::before{content:"https://static1.squarespace.com/static/652603744296862141add132/t/6650e88f3e0f2c6062a82ec8/1716578448054/CheckListBullet.png"!important}

#1. I don't know this. But we can use code to Duplicate text with animated and append to new position (and use code to hide current animated text if you want)

#2. Sometimes code won't show properly when you open Custom CSS box.