CSS to override Mobile Grid settings

Hi. New to customizing Squarespace sites. I'm trying to adjust the mobile grid settings for a few blocks. When I inspect the code, the default is at:

   @media (min-width: 768px) { .fe-block-d7d31198b7ca81fd4b6f { grid-area: 8/3/10/8;} }

In the Inspector, if I change the grid area to grid-area: 8/3/10/11, everything looks great on the screen.

But when add the CSS:

   @media (min-width: 768px) { .fe-block-d7d31198b7ca81fd4b6f { grid-area: 8/3/10/11!important;} }

to the Custom CSS section under Website Tools, it has no effect.

Any advice on how to make this work?

Thanks in advance. M

Answering my own question... figured it out. The necessary code is:

@media (min-width: 768px) { .fe-block-d7d31198b7ca81fd4b6f { ~"grid-area: 8/3/10/11" !important;} }