How to fix mismatched css grid cell sizes?

Question

The following responsive css grid code produces cells with mismatched sizes. I can't for the life of me figure out how this is possible.

#service-icons {
    display: grid;
    margin-top: 3rem;
    margin-bottom: 3rem;
    grid-gap: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    justify-items: center;
    align-items: center;
}
.service-icon {
    position: relative;
    display: inline-block;
    margin: 1rem;
    margin-bottom: 0;
}

The page in question can be found here. (Be sure to shrink the browser window to ensure use of mobile styling.)

Here is a screenshot showing the erroneous result:

Answer 1

As per Zohir's comment under the question, the mismatched sizes can be accounted for by the different widths of the text elements. The larger text size pushes the grid cell size beyond its minimum. Allowing the text element to overflow within a new parent element fixed the problem in practice.