Can't resize gap, widht and height on sass with media query - sass

Question

I'm resizing a card with media query but the labels I've created inside it gets weird because of the gap from the parent div. I know I can fix it changing the gap of the parent div and the widht and height of the labels, but I'm not beeing able to do that.
It stays like this
I want it to be like this
I'm using SASS and bootstrap 5.3.0.
This is a challenge from Frontend Mentor btw.
HTML:
<div class="card" id="submitCard">
<div class="star"><img src="images/icon-star.svg" alt=""></div>
<p class="cardTitle">How did we do?</p>
<p class="cardDescription">Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!</p>
<form id="ratingForm">
<div class="inputs">
<input type="radio" name="rating" id="rating1" value="1"></input>
<label for="rating1">1</label>
<input type="radio" name="rating" id="rating2" value="2"></input>
<label for="rating2">2</label>
<input type="radio" name="rating" id="rating3" value="3"></input>
<label for="rating3">3</label>
<input type="radio" name="rating" id="rating4" value="4"></input>
<label for="rating4">4</label>
<input type="radio" name="rating" id="rating5" value="5"></input>
<label for="rating5">5</label>
</div>
<button class="submitBtn">Submit</button>
</form>
</div>
CSS:
#submitCard{
#ratingForm{
color: var(--text-color);
margin-top: 10px;
.inputs{
display: flex;
justify-content: space-between;
gap: 20px;
label{
display: grid;
place-content: center;
background-color: var(--btn-color);
border-radius: 50px;
width: 50px;
height: 50px;
padding-top: 5px;
}
input[type="radio"]{
display: none;
&:checked + label {
background-color: var(--btn-selected-color);
color: var(--white);
}
&:hover + label{
background-color: var(--primary);
color: var(--white);
cursor: pointer;
}
}
}
}
}
Media query:
#media (max-width: 430px){
.card{
width: 360px;
padding: 25px;
border-radius: 15px;
}
#submitCard {
#ratingForm{
.inputs {
gap: 0;
label{
width: 45px;
height: 45px;
}
}
}
}
}

Answer 1

Well.. The thing is: I placed my media query before the styles I was trying to change. I guess i'm going back to practice. 😂🤡
I found the answer by this post: Css id's don't change on media queries