How do I resize border of the button for responsive

See more:

CSS

HTML

buttons

CSS3

HTML5

Flex

I was unable to change the width of the button for mobile devices in the media query
help me, please. It works perfectly for the desktop size.

What I have tried:

<div class="btn">
     Get Started
</div>

.btn{
    padding: 25px 80px;
    font-weight: 600;
    border: 1.5px solid var(--green);
    display: inline-block;
    border-radius: 999px;
    color: var(--black);
}

.btn:hover {
    background-color: var(--green);
    cursor: pointer;
    color: var(--white);
    transition: .2s;
}


@media screen and (max-width:768px) {
	 .btn {
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-size: 10px;
    }


}


@media screen and (max-width:380px) {
	.btn {
        margin: 0;
        margin-top: 50px;
        font-size: 8px;
        transition: .5s;
    }

}