Flexbox gap workaround for Safari

I finished my website but I didn't realize that safari doesn't support the flexbox gap property. Is there a way around this without having the mess anything up? This is mostly for my media queries.

<div class="social-media">
  <a href="https://github.com/">
    <img class="social-media__icon" src="img/github.png" alt="Github">
  </a>
  <a href="https://www.linkedin.com/">
    <img class="social-media__icon" src="img/linkedin.png" alt="LinkedIn">
  </a>
</div>

.social-media {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 8rem;
    margin-top: 10rem;
    padding-bottom: 2rem;
}

.social-media img {
    width: 90px;
    height: 90px; 
}
    
@media only screen and (max-width: 400px) {
    .social-media {
        gap: 3rem;
        margin-top: 5rem;
    }
    .social-media img {
        width: 62px;
        height: 62px;
    }
}

Use the Lobotomized owl selector: .parent > * + * {} to add a margin-left that gives you space between the elements that come after another element, this way you eliminate the undesired margin it creates when you put the margin directly to the child's first element (.social-media img{})

.social-media > * + * { margin-left: 8rem;}

Here you can read more about the Lobotomized Owl Selector

Edit: Gap is now supported in Safari 14.1 (Sep 2021) so you should be able to use it no problem.