Refactor Claro's container-inline.module stylesheet

Problem/Motivation

This is a child of #3324398: [META] Update Claro CSS with new coding standards and part of #3254529: [PLAN] Drupal CSS Modernization Initiative.

Steps to reproduce

The stylesheet at https://git.drupalcode.org/project/drupal/-/blob/10.0.x/core/themes/claro/css/components/container-inline.module.pcss.css needs to be refactored to make use of modern CSS and Drupal core's PostCSS tooling.

@todo: Add clear testing instructions to test this manually on the UI.

Proposed resolution

• Use CSS Logical Properties where appropriate.
• Use CSS nesting where appropriate.
• Use existing variables (variables.pcss.css) where appropriate. Follow the proposed Drupal CSS coding standards to name the variables.
  • Add a comment when there's a value where there is not a variable like font-size: 1.23rem; /* @todo One off value. */
  • When possible, set variables at the root of the component and then map them to global theme variables:
    

    .entity-meta {
      --entity-meta-title-font-size: var(--font-size-h5);
    
      ... more style
    }
    
    .entity-meta__title {
      font-size: var(--entity-meta-title-font-size);
    }
    

Out of scope

• Changing CSS classes
• Drupal 9 patches

User interface changes

None. There should be no visual differences.
Please post before/after screenshots and make sure they look the same.