In the project you need to make a radio group based on the layout. The project is written in vue 3 composition api and using tailwind. Here is the resulting code:

<script setup>
import { ref } from "vue";

const graphs = ['1', '2', '3', '4'];
const picked = ref('');
</script>

<template>
  <div class="w-screen h-screen pt-[20px] pl-[20px] bg-gray-400 inline-block">
    <div class="desktop:flex desktop:flex-row desktop:w-[45%] grid grid-cols-2 w-[25%]">
      <label class="inline-block desktop:ml-[4%]" v-for="graph in graphs" :key="graph">
        <input v-model="picked" :value="graph" type="radio" class="hidden peer">
        <span class="relative inline-block w-[17px] h-[17px] border border-blue-200 rounded-full
                    hover:border-blue-400 peer-checked:border-blue-700 peer-checked:before:bgblue-700
                    peer-checked:before:content-[''] peer-checked:before:absolute peer-checked:before:rounded-full
                    peer-checked:before:w-[7px] peer-checked:before:h-[7px] peer-checked:before:top-1/2
                    peer-checked:before:left-1/2 peer-checked:before:transform peer-checked:before:-translate-x-1/2
                    peer-checked:before:-translate-y-1/2">
        </span>
        <span class="ms-[15px]">
          {{ graph }}
        </span>
      </label>
    </div>
  </div>
</template>

But for reasons unknown to me, it is noticeable that the circle on the selected radio button is displayed off-center, this can be seen in the screenshots:

screen1

screen2

What could be the problem? I’m more interested in the answer to why this happens

I tried to solve the problem with GPT chat, but it couldn’t identify the problem.
Previously, in other projects I made radio groups without using :before, but problems with centering remained.