Dynamic sizing and responsive design

Question

I have been working away on a website for a friend. The source code is currently comprised of inspiration from Dennis Snellenberg. 3% rule in full motion here I must admit.

The issue that I am currently having is that on smaller screen devices (particularly phones)things are over lapping so I am trying to add media queries to better control this.

Using Safari's Enter Responsive Design Mode, I can see that some of the queries I have tried are working or partially working and some are not even working. I am perplexed on how this could be the case.

Working, taken from src/components/Projects/components/project/style.module.scss:

// Adjustments for smaller screens
    @media (max-width: 847px) {
        grid-template-columns: 1fr; // stack everything in one column on small screens
        grid-template-rows: auto auto auto; // three rows for title, video, and paragraph

        h2 {
            margin-bottom: 10px; // less space between title and content on small screens
        }

        p, video {
            grid-column: 1; // both text and video take up the full width
        }

        video {
            order: -1; // video comes before text on small screens
            grid-row: 2; // video in the second row
        }

        p {
            grid-row: 3; // paragraph in the third row
            margin-top: 20px;
        }
    }

Not working, taken from src/components/Landing/style.module.scss:

  @media (max-width: 768px) {
    .description {
      font-size: 4.5vw; /* Reduce font size on smaller screens */
      right: 20vw; /* Adjust left positioning on smaller screens */
      max-width: calc(50% - 20px); /* Adjust max-width accordingly */
      padding-right: 10px; /* Reduce padding on smaller screens if necessary */
    }

My questions are:

1. Are there any packages that I can use to make this easier for me? I'm thinking Ionic has some great prebuilt components for cross screen sizing rules.
2. How would you restructure or change the existing css to make sure that the queries work? I'm thinking using IonGrids more frequently and changing px for vh,vw/rem etc.

Thank you for taking the time to read! Dean

I have tried changing the position of where the non working media query is in the scss. This did not seem to change the text :(