when I change the style of an element outside of @media, it also changes inside of @media query

I wanted to talk about the problem I'm having with @media, I started styling it on mobile first, but when I change something like Font-size on desktop, it also changes on mobile, can someone help me?

enter code here@media screen and (max-width: 600px)

.content
    height: 50%
    width: 99%

h3
    padding: 0rem 2rem 1.5rem
    font-size: 18px
    margin: 12px
    font-weight: bold
    text-align: center

.circle 
    height: 53px
    width: 53px
    margin: -13px 0px 0px 10px
    background-color: #fff
    border: 2px solid #5E7278
    line-height: 65px
    font-family: "Roboto"
    color: rgb(97, 120, 123)
    font-size: 25px
    border-radius: 50%
    text-align: center
    margin-left: 60px
    cursor: pointer
    -moz-background-clip: padding-box
    -webkit-background-clip: padding-box
    background-clip: padding-box

span
    font-size: 16px
    display: flex
    justify-content: center
    align-items: center
    color: rgb(97, 120, 123)
    margin-left: 53px
    
.stepWrapper 
    display: flex
    margin-bottom: 2px
    
.stepBlock .circleWrapper 
    padding: 0px 0px
    position: relative

.selected .circle 
    color: #FFF
    background-color: rgb(97, 120, 123)
   
.stepBlock:not(:last-child) >
     .circleWrapper::after 
        content: ''
        width: 100%
        height: 2px
        position: absolute
        top: 0px
        bottom: 0px
        background-color: rgb(97, 120, 123)
        margin: auto
        z-index: -1

.stepBlock:not(:last-child) > 
    .circleWrapper::after 
        height: 3px
        margin-left: 67px
        margin-top: 13px
        

.stepBlock:not(:last-child)
    .selected > .circleWrapper::after, .stepBlock:not(:last-child)
        .selected ~ .stepBlock:not(:last-child) > 
            .circleWrapper::after 
                height: 2px
                opacity: 0.6
                border: 1px solid transparent

.primaryButton 
    padding: 10px 25px
    background-color: rgb(97, 120, 123)
    border-color: rgb(97, 120, 123)
    border: none
    margin: 10px
    color: white
    border-radius: 4px
    cursor: pointer


.primaryButton:disabled 
    opacity: 0.5  

@media screen and (max-width: 600px)

h6
    color: black
    padding: 0.5rem 2rem 2rem
    text-align: center
    line-height: normal
    margin-top: 14px
    margin-bottom: 0px

.inputs-geral 
    margin-left: 10px
    margin-right: 10px
    margin-top: -11px
    border-radius: 10px
    padding: 0px 30px
    display: flex
    flex-direction: column
    -webkit-box-align: center
    align-items: center

.input-group
    display: flex
    align-items: baseline
    flex-wrap: wrap
    width: 100%

.holder
    display: flex
    margin-left: -2px
    align-items: center
    padding: 0.335rem 0.75rem
    margin-bottom: 0
    font-size: 11px
    line-height: 1.1
    color: #495057
    text-align: center
    white-space: nowrap
    font-weight: 600
    background-color: #e9ecef
    border: 1px solid #ced4da
    border-radius: 0.25rem

.form-control 
    border: transparent
    border-bottom: 1px solid #e6e6e6
    height: 30px
    width: 55%

.form-control :hover
    border: 1px solid rgb(97, 120, 123)

.jss8
    margin-left: -6px
    position: relative
    z-index: 1
    
.politic
    color: black
    font-size: 9px
    font-weight: 600
    margin-left: 24px
    text-align: justify
    text-justify: inter-word
    line-height: 2.1
    margin-top: -25px

.text-center 
    text-align: center!important
    display: inline-block

.buttons
    margin-right: 35px

.bt1
    width: 100%
    color: white
    background-color: rgb(97, 120, 123)
    border-radius: 3px
    padding: 9px 33px
    line-height: 1.2
    border: none
    font-size: 14px
    margin-top: 20px
    text-align: center
           
.bt2
    width: 100%
    color: white
    background-color: rgb(97, 120, 123)
    border-radius: 3px
    padding: 7px 37px
    margin-left: 23px
    border: none
    display: flex
    justify-content: center
    align-items: center
    
.avanced
    padding: 1rem 3rem
    text-align: center
    background: linear-gradient(140deg, rgb(243, 210, 60) 0%, orange 100%)
    border: none
    font-weight: bold
    letter-spacing: 0px
    border-radius: 50px
    margin-bottom: 40px
    color: #FFF
    margin-left: 130px
    margin-top: 47px
    cursor: pointer
    font-family: "Roboto"
    text-transform: uppercase

.video
    fill: currentColor
    width: 1em
    height: 1em
    position: absolute
    margin: 0px 0px 0px 30px
    font-size: 1rem

.question
    font-size: 1rem
    position: absolute
    margin: -5px 0px 0px 5px

.button-help
    background-color: #074d47 !important
    border-radius: 100%
    border: none
    width: 45px
    height: 45px
    float: right
    margin-top: 165px
    margin-right: 15px

.content width: 99% height: 100vh margin-right: 20px margin-left: 20px

.input-group position: relative display: flex flex-wrap: wrap // For form validation feedback align-items: stretch width: 100%

h3 padding: 2rem 2rem 0px font-size: 1.5rem font-weight: 600 text-align: center font-family: Roboto, sans-serif margin: 0px padding: 0px