Brandingul site-ului nu este afișat corect

Lucrez la o nouă temă pentru distribuția Rain (Drupal 9), dar îmi este greu să arăt corect brandingul site-ului. Este prima dată când încerc să fac o temă, așa că îmi pare rău dacă întreb prost.

Site_logo, site_name și site_slogan sunt afișate unul deasupra celuilalt.

Iată fragmente din cloud_theme.theme:

/**
 * Implementează hook_preprocess_HOOK().
 */
funcția cloud_theme_preprocess_block(matrice &$variabile) {
  // Folosiți svg-ul inline în blocul de branding.
  if ($variables['plugin_id'] == 'system_branding_block') {
    $variables['attributes']['class'][] = 'clearfix';
    if (isset($variables['site_logo'])) {
      $logo_path = DRUPAL_ROOT . $variables['site_logo'];
      // Dacă logo-ul este un SVG, permitem să-l încărcăm conținutul, astfel încât să îl putem integra.
      if (strlen($logo_path) - strpos($logo_path, '.svg') === 4) {
        $variables['site_logo_svg'] = file_get_contents($logo_path);
      }
    }
  }
}

Iată fragmente din cloud_theme.libraries:

site-branding:
  css:
    componenta:
      dist/css/site-branding.css: {}

Iată fișierul meu site-branding.css:

/**
 * @fișier
 * Stiluri vizuale pentru blocul de branding al site-ului în tema Cloud.
 */

.site-logo {
  display: inline-block;
  margine-dreapta: 1em; /* LTR */
  margine-inferioară: 0,286 em;
  chenar-jos: 0;
}
[dir="rtl"] .site-logo {
  margine-dreapta: 0;
  margine-stânga: 1em;
}
.site-text {
  display: inline-block;
  vertical-align: top;
}

@media all and (min-width: 461px) {
  .site-text {
    marjă-inferioară: 1.857em;
  }
}

@media all and (min-width: 901px) {
  .site-text {
    umplutura: 1.286em 0 0;
  }
}
.Numele site-ului {
  culoare: #686868;
  dimensiunea fontului: 1.6em;
  înălțimea liniei: 1;
}

@media all and (min-width: 901px) {
  .Numele site-ului {
    dimensiunea fontului: 1.821em;
  }
}
.site-slogan {
  margine-sus: 7px;
  spațierea cuvintelor: 0,1 em;
  familie de fonturi: „Helvetica Neue”, Helvetica, Arial, sans-serif;
  dimensiunea fontului: 0.929em;
  font-style: italic;
}

Iată fișierul meu block--system-branding-block.html.twig:

{% extinde „block.html.twig” %}
{#
/**
 * @fișier
 * Implementarea temei Cloud pentru un bloc de branding.
 *
 * Fiecare variabilă a elementului de branding (logo, nume, slogan) este disponibilă numai dacă
 * activat în configurația blocului.
 *
 * Variabile disponibile:
 * - site_logo: sigla pentru site așa cum este definită în setările Aspect sau teme.
 * - site_name: Numele site-ului, așa cum este definit în setările pentru informații despre site.
 * - site_slogan: sloganul pentru site, așa cum este definit în setările pentru informații despre site.
 */
#}
{% set attributes = attributes.addClass('site-branding') %}
{% block content %}
  {% if site_logo %}
    <a href="{{ path('<front>') }}" rel="home" class="site-logo">
      <img src="{{ site_logo }}" alt="{{ „Acasă”|t }}" />
    </a>
  {% endif %}
  {% if site_name or site_slogan %}
    <div class="site-text">
      {% if site_name %}
        <div class="site-name">
          <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
        </div>
      {% endif %}
      {% if site_slogan %}
        <div class="site-slogan">{{ site_slogan }}</div>
      {% endif %}
    </div>
  {% endif %}
{% endblock %}

Nu pot să-mi dau seama cu adevărat ce îmi lipsește.