grid-template-columns имеет разные результаты в chrome/arc и firefox

Я заметил, что одинаковые CSS/HTML дают разные результаты в Arc/Chrome по сравнению с Firefox. Я не могу понять, почему.

Это HTML для обоих:

<div class="vv-topicrow-info">
     <div class="vv-topicrow-av"><a href="..."><img src="..."></a></div>
     <div class="vv-topicrow-title"><a href="...">Lorem ipsum dolor sit amet</a></div>
     <div class="vv-topicrow-desc">consectetur adipiscing elit</div>
     <div class="vv-topicrow-pages">
          <div class="vv-topicrow-pages-img"><img src="..."></div>
          <span class="small">
               <a href="...">1 </a>
               <a href="...">2 </a>
               <a href="...">3 </a>
               <a href="...">...7 </a>
          </span>
     </div>
     <ul class="vv-topicrow-details">
          <li>Fusce at justo</li>
          <li>et eros</li>
          <li>suscipit laoreet</li>
     </ul>
</div>

А вот CSS для контейнера сетки:

.vv-topicrow-info {
     display: grid;
     grid-template-columns: 5.125rem 1fr auto;
     grid-template-rows: 5.125rem 4rem 1.5rem;
     gap: 0.25rem 0.25rem;
     grid-auto-flow: row;
     grid-template-areas:
          "vv-topicrow-av vv-topicrow-title vv-topicrow-title"
          "vv-topicrow-desc vv-topicrow-desc vv-topicrow-pages"
          "vv-topicrow-details vv-topicrow-details vv-topicrow-details";
}

.vv-topicrow-av {
     grid-area: vv-topicrow-av;

     width: 4.5rem;
     height: 4.5rem;
     padding: 0.25rem;
     border-radius: 0.125rem;
     background-color: teal;
}

.vv-topicrow-av img {
     width: 4.5rem;
     height: 4.5rem;
     border-radius: 0.125rem;
}

.vv-topicrow-title {
     grid-area: vv-topicrow-title;

     padding: 0.5rem;
     font-size: 3rem;
     font-weight: 900;
     overflow: hidden;
     background: teal;
     border-radius: 0.125rem;
     text-transform: uppercase;
}

.vv-topicrow-desc {
     display: flex;
     align-items: center;
     grid-area: vv-topicrow-desc;

     font-weight: 200;
     background: pink;
     font-size: 1.25rem;
     padding: 0.25rem 0.5rem;
     text-transform: uppercase;
}

.vv-topicrow-pages {
     grid-area: vv-topicrow-pages;

     display: flex;
     font-size: 0px;
     background: yellow;
}

.vv-topicrow-pages .small {
     height: 100%;
     margin-left: 0.25rem;

     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
     flex-direction: column;
     justify-content: space-between;
}

.vv-topicrow-pages .small a {
     width: 1.5rem;
     height: 1.5rem;
     font-weight: 900;
     background: red;
     font-size: 0.75rem;
     padding: 0.125rem 0.125rem;

     display: flex;
     align-items: center;
     justify-content: center;
}

.vv-topicrow-pages .small a:nth-of-type(3) {
     margin-top: 0.125rem;
     margin-left: 0.125rem;
}
.vv-topicrow-pages .small a:nth-of-type(4) {
     margin-top: 0.125rem;
     margin-left: 0.125rem;
     letter-spacing: -3px;
}

.vv-topicrow-pages .vv-topicrow-pages-img {
     width: 3.35rem;
     height: 3.35rem;
     padding: 0.25rem;
     border-radius: 0.125rem;
}

.vv-topicrow-pages .vv-topicrow-pages-img img {
     width: 3.35rem;
     height: 3.35rem;
     filter: grayscale(1);
     border-radius: 0.125rem;
}

.vv-topicrow-details {
     grid-area: vv-topicrow-details;

     margin: 0;
     padding: 0;
     list-style: none;

     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     justify-content: space-between;
}

.vv-topicrow-details li {
     flex-grow: 1;
     background: green;
     font-size: 0.75rem;
     text-align: center;
     margin-right: 0.25rem;
     padding: 0.25rem 0.5rem;
}

.vv-topicrow-details li:last-of-type {
     margin-right: 0;
}

Вот Codepen с кодом: нажмите здесь

Вот результат в Chrome/Arc (и то, чего я хочу/ожидаю):
вывод arc

А вот как это выглядит в Firefox, вы можете видеть, что оно выходит за пределы:
вывод firefox

Попытавшись разобраться с этим, я заметил, что в Chrome/Arc значения возвращаются так: grid-template-columns: 82px 479.602px 129.594px, в то время как в Firefox — так: grid-template-columns: 82px 523.6px 99.6px

направляющие сетки arc
направляющие сетки firefox

Версия Firefox: 129.0.2 (64-разрядная)

Версия Arc: 1.60.0 (53678) // Версия движка Chromium 128.0.6613.138

Большое спасибо! ✨