How can I edit the font size of heading in bootstrap and sass

Question

How can I edit the font size of heading in bootstrap and sass? and tried this code and it doesn't work, help me fix this. This is my HTML CODE:

<span class="h1" id="minutes">00</span>
<span class="h1" id="colon">:</span>
<span class="h1" id="seconds">00</span>
<span class="h1" id="colon">.</span>
<span class="h1" id="milliseconds">00</span>

This is my SASS Code

    @import "../node_modules/bootstrap/scss/_functions";
    @import "../node_modules/bootstrap/scss/_variables";
    @import "../node_modules/bootstrap/scss/_utilities";
                
    $utilities: () !default;
    $utilities: map-merge((
                
    
    "font-size": (
                  rfs: true,
                  property: font-size,
                  class: fs,
                  values: (
                    1: 7rem,
                    2: 6rem,
                    3: 5rem,
                    4: 4rem,
                    5: 3rem,
                    6: 2rem
                  ),
                ),
              ),
              $utilities
                );
                
    @import "../node_modules/bootstrap/scss/bootstrap";