diff --git a/resources/css/bem/profile-badge.less b/resources/css/bem/profile-badge.less
index 74cc5691324..cb62a25db2f 100644
--- a/resources/css/bem/profile-badge.less
+++ b/resources/css/bem/profile-badge.less
@@ -4,8 +4,8 @@
 .profile-badge {
   --pin-opacity: 0;
 
-  width: 86px;
-  height: 40px;
+  width: var(--badge-width);
+  height: var(--badge-height);
   position: relative;
 
   &:hover {
diff --git a/resources/css/bem/profile-badges.less b/resources/css/bem/profile-badges.less
index 52905760c2e..37be14cb197 100644
--- a/resources/css/bem/profile-badges.less
+++ b/resources/css/bem/profile-badges.less
@@ -3,10 +3,12 @@
 
 .profile-badges {
   .inner-shadow-top();
+  --badge-width: 86px;
+  --badge-height: 40px;
   --gutter: @gutter-v2;
   background-color: hsl(var(--hsl-b4));
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--badge-width), 1fr));
   gap: 10px;
   padding: 10px var(--gutter);