Need help with Ghost pricing plugin (tablet & mobile size)

Site URL: https://compass-pilates.squarespace.com/pricing

I hope someone CSS help 🙂

https://compass-pilates.squarespace.com/pricing
pa33word

I have used the awesome Ghost Pricing Block plug-in and it's working really well on desktop and mobile.

Tablet size needs some attention as the content breaks out of the container. Do I need to add an additional style for tablet? If so...how?

This is what's currently in place for mobile.
@media (max-width : 1300px) { .sqs-block-markdown {

I have attached a screenashot with all 3 sizes and as you can see, the middle (tablet) is flowing outside of the green box.

Fingers crossed someone can help me fix this.
Cheers
Claire.

You can try this

@media (max-width : 1024px) { 
  [data-collection-id="5f0cf7cd8480bd4a7f209852"] .sqs-col-3 {
    width: 50%;
  }
}

Hi @bangank36

Thanks for you message.
Do I replace the original @media or add it to the next line?
I tried replacing it but it said there was a missing opening. 

Thanks for your help.
Claire.

Please add it into next line

Thanks for the reply 🙂
I have added it to the next line but wanted to question if I needed to change the first @media?
It's on the site now but it still performs in the same way.
Any further ideas?

SOLVED!!!!

@tuanphan was able to help with this