Social Proof section Using flexbox

Hello Everyone, All feedback/review/correction/suggestions are welcome.

I've finished this project since few days back but I just keep looking for errors to correct and that make makes me loop through an infinite loop of correction. But I guess it can't be perfect.

here are my question:

• I used the markup below but I'm seeing some weird black border under/over my pink border, it kinda look like a default border, but I was expecting it to be overwritten by my style below, but it's not. kindly help to check what the problem is, this is my first time using :focus-visible.

a:focus-visible {
  border: dotted 0.3rem var(--Soft-Pink);
  padding: 0.3rem;
}

• I used positive and negative border to make the boxes slightly away from each other, is there a better way ?

• does the markup below work that much for SEO ? and what other <meta> would you recommend ?

<meta name="description" content="This is Engineer Hamziey's solution to FrontendMentor challenge(social proof section master)">
<meta name="Keywords" content="Web developer,Engineer Hamziey, Frontend developer">

• For the media query I used @media (min-width: 1024px) for the desktop, the design doesn't look satisfactory on screens lesser than 1024px in my opinion, any comment on that? what's your opinion?