Bootstrap 5.3 responsive font wrong priority order

Question

I'm using bootstrap 5.3 and have added the below code to the scss to add responsive font.

The issue is that the fs-lg-3 is taking priority over the fs-xl-2 and the font for the wider screen is actually displaying the lg size rather than the xl or even xxl size.

My screen width 1920px, browser full screen.

SCSS Code:

$utilities: map-merge(
  $utilities,
  (
    "font-size":
      map-merge(
        map-get($utilities, "font-size"),
        (
          responsive: true
        )
      )
  )
);

I have the following html

<p class="fs-6 fs-md-4 fs-lg-3 fs-xl-2">Some Text</p> 

The css for the element shows the following in the chrome developer tools.

@media (min-width: 1200px) {
    .fs-lg-3 {
        font-size: 1.75rem !important;
    }
}
@media (min-width: 1200px) {
    .fs-md-4 {
        font-size: 1.5rem !important;
    }
}
@media (min-width: 1200px) {
    .fs-xl-2 {
        font-size: calc(1.325rem + 0.9vw) !important;
    }
}

In the compiled css file for the respective min-width 1200px :

.fs-md-4 appears on line 11528

.fs-lg-3 appears on line 11537

.fs-xl-2 appears on line 10775

I suspect its because the fs-lg-3 appears later in the css file on line 11537, whereas fs-xl-2 is before it on 10775.

Is this a bug in bootstrap, am I misunderstanding it, or do I need to change the scss code so that is orders the font sizes in the correct order of operations?

I'm expecting the fs-xl-2 class to change the font-size, but instead the fs-lg-3 takes priority on wider screens.