Why does theme's reset CSS have higher precedence of plugin's CSS?

In the style.css of the theme Twenty Twenty-One, there is a piece of reset CSS:

/**
 * Reset specific elements to make them easier to style in other contexts.
 */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, form, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

Why does it have higher precedence than the CSS in my custom plugin? The result is that I have to add !important to override this.

Here is the code in my plugin:

@media only screen and (min-width: 482px) {
  p {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    /* margin-bottom: var(--global--spacing-vertical); */
  }
}

I target the general p, not a specific class.