I want to override a css media-query from NuxtUiPro PageColumns: on large-screens I am trying to achieve a 2-col layout by adding class="lg:column-2" to the UPageColums` element.

<UPageColumns class="lg:columns-2">
  <UPageCard v-for="(foo, index) in [1, 2, 3, 4]" :key="index">
    <div>
      Hello
      {{ foo }}
    </div>
  </UPageCard>
</UPageColumns>

Locally this does not work. I tried to replicate the behavior on StackBlitz but cannot reproduce the issue there (instead I get the desired 2-col layout). At this point I do not see the difference between my local setup and the StackBlitz.

I downloaded the NuxtUiPro StarteTemplate, did an npm -i and pasted the code above in index.vue. You should get three instead of two columns locally.

Interestingly when I change to any other column-count for lg-screens locally I get the desired result. Only lg:column-2 is getting overriden by lg-column-3.

Two screenshots that show that the exact same classes have been applied but locally the three columns win over the two-columns.