Hero Button Size Mobile

I am trying to change the button size of the main button in the Hero section. I ended up installing Simple Custom CSS and was able to change the size for desktop by adding this:

.btn-lg {
font-size: 22px !important;
font-size: 1.375rem !important;
}

This doesn’t affect the size on mobile though and I tried wrapping it in @media screen and (min-width: 720px), but that had no affect on mobile or tablets. Any suggestions are welcomed as I’m out of ideas on why this wouldn’t work. The exact code I tried was:

@media screen and (min-width: 720px) {
.btn-lg {
font-size: 22px !important;
font-size: 1.375rem !important;

}

.btn {
font-size: 22px !important;
font-size: 1.375rem !important;

}

.btn-theme-primary {
font-size: 22px !important;
font-size: 1.375rem !important;

}
}