Pricing Component with Toggle using HTML, JS, SCSS

Hi everyone! I completed this challenge using Scss to nest some elements and keep the stylesheet cleaner. The toggle switch changes the text dynamically using JS, what would be the preferred way to do this? I struggled with the mobile responsiveness to maintain the card width, so I ended up using media queries to change the width as the screen grows. I also had to set a negative margin at the very top because as the screen grows there is a strange unoccupied space at the top (at least on my computer), any idea what I did wrong ? Finally, this was my first time trying to add rules for browser support, I used a website to add vendor prefixes, but there is still a different result on Safari. Any feedback would be greatly appreciated, thank you!