Add vertical spacing for Badges and use one column on Desktop

Description

Hey there 👋

It seems like the project badges are missing proper vertical spacing so this could be easily fixed by using flex display and gap.

On larger screens it might be helpful to just use one column so it looks rather liked a stacked list which avoids having a mixed amount of badges per line.

Screenshots

Current Suggestion (small screen) Suggestion (medium screens) Suggestion (large screens)
1-badges-current 3-badges-mobile-flex-wrap 4-badges-tablet-flex-wrap 2-badges-desktop-one-column

Tasks

  1. Use flexbox/grid for project badges so a vertical gap can be added easily by adding gl-flex gl-flex-wrap gl-gap-3 lg:grid to <div class="project-badges">
  2. Remove gl-mr-3 class from project badge links
  3. Add class to badge links so they are not using full width by adding gl-w-fit class to them