¿Cómo puedo cambiar los estilos de una etiqueta, por ejemplo h3, h2, de un componente desde otro archivo CSS? No entendí muy bien esa par...

¿Cómo puedo cambiar los estilos de una etiqueta, por ejemplo h3, h2, de un componente desde otro archivo CSS?

No entendí muy bien esa parte, ahí está usando variables, pero si tengo que modificar estos elementos también debería crear variables para el tamaño de fuente, el color de fuente, etc?

my-element.js

getTemplate() {
    const template = document.createElement("template");
    template.innerHTML = `
      <section class="card">
        <div class="imagen_contenedor">
          <img src=${this.img}>
        </div>
        <h3>${this.h3}</h3>
        <h2>${this.h2}</h2>
        <p>${this.texto}</p>
        <a href="#">${this.link}</a>
      </section>
      ${this.getStyles()}
    `;
    return template;
  }
  getStyles() {
    return `
    <style>
	:host{
        --card-color: #F7F7F7;
        display: inline-block;
      }
      .card{
        margin: 10px;
        width: 300px;
        height: auto;
        padding: 30px;
      }
      section{
        background: var(--card-color)
      }
      .imagen_contenedor img{
        height: 200px;
      }
      </style>
    `;
  }

style.css

body {
  font-family: Arial, Helvetica, sans-serif;
}
my-element {
  --card-color: #ffd1d1;
}
my-element h3 {   // esto no funciona
  color: red;
}