12Vadim12

<meta name="viewport" content="width=device-width, initial-scale=1.0">

У меня классика стоит, и все работает. Адаптивное устройство у вас должно быть выбрано
в размерах(в коде элементов), там же если не работает ctrl + scroll, можете увеличить нужную часть страницы, выбрав значение 150%, или 200%

h1{
  color: aliceblue;
  width: 160px;
  height:160px;
  background: green;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
}

function color(event){
  let style = event.target;
  if(style.tagName == 'INPUT'){
    style.style.background = 'blue';
  }
}

display:flex;
align-items:flex-end;

work.onclick = function(){
 document.getElementById('test').classList.toggle('active');
}

#test.active{
  transform: scale(2);
}

<input class='x' id="for-gender1">
<label class='y' for="for-gender1"></label>

.x{
  appearance: none;
  outline: none;
  position: relative;
   &::before{
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left:-17px;
    border-radius: 50%;
    background-color: white;
    border: 1px solid #D1D5DB;
  }
  &:checked::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left:-17px;
  border-radius: 50%;
  visibility: visible;
  border: 4px solid $color1;
}

Задай свои стили только, а label(вторую радиокнопку ,сделай псевдоэлементами в похожем стиле)