Image with text component has styling issues on pages

I added this big style section on many Chicago pages in Full HTML. (Some pages I have more in the same full HTML block, but this is usually by far the biggest one).

<style>
    /* Image with column adjustments for responsive breakpoints */
    @media (min-width: 768px) {
        .paragraph--type-image-with-text.text-alignment-right .group-text {
            padding-left: 0;
        }
    }
    @media (min-width: 1120px) {
        .paragraph--type-image-with-text.text-alignment-right .group-text {
            padding-left: 4rem;
        }
    }
    .field--name-field-cta {
      width: auto;
    }
    @media (min-width: 768px) {
        .paragraph .group-content>.field--name-field-title, .paragraph .group-link>.field--name-field-title, .paragraph .group-text>.field--name-field-title, .paragraph>.field--name-field-title {
            margin-top: 1em;
        }
    }
    @media (min-width: 1120px) {
        .paragraph .group-content>.field--name-field-title, .paragraph .group-link>.field--name-field-title, .paragraph .group-text>.field--name-field-title, .paragraph>.field--name-field-title {
            font-size: 1.5rem;
        }
    }
    .paragraph .group-content>.field--name-field-title, .paragraph .group-link>.field--name-field-title, .paragraph .group-text>.field--name-field-title, .paragraph>.field--name-field-title { 
        margin-top: 1em;
    }
    </style>

https://events.drupal.org/chicago2026/keynote-speakers is a good example because that only has this one single blob of full HTML, so it can be easily isolated :D

If you remove that HTML block, you notice these differences:

  1. The left aligned and right aligned image with text components have different text sizes for their title :O

Screenshot_2026-01-22_at_12.07.29

  1. On smaller breakpoint, the left aligned text version has title too close to the image AND it has a CTA that is indented unlike the text.

Screenshot_2026-01-22_at_12.10.40

  1. The other (right aligned) text with image is even more broken with indented text despite showing below the image and even more indented CTA. The title is also too close.

Screenshot_2026-01-22_at_12.10.14

I believe these things are solved by the above snippet on top of the site theme. I copied the snippet around to a few pages :D