Брендинг сайта отображается некорректно

Я работаю над новой темой для дистрибутива Rain (Drupal 9), но мне трудно правильно показать брендинг сайта. Я впервые пытаюсь создать тему, так что извините, если глупо спрошу.

Site_logo, site_name и site_slogan отображаются друг над другом.

Вот выдержки из cloud_theme.theme:

/**
 * Реализует hook_preprocess_HOOK().
 */
функция cloud_theme_preprocess_block (массив и переменные $) {
  // Использовать встроенный svg в блоке брендинга.
  если ($variables['plugin_id'] == 'system_branding_block') {
    $variables['атрибуты']['класс'][] = 'clearfix';
    если (isset($variables['site_logo'])) {
      $logo_path = DRUPAL_ROOT. $переменные['site_logo'];
      // Если логотип представляет собой SVG, давайте загрузим его содержимое, чтобы мы могли его встроить.
      если (strlen($logo_path) - strpos($logo_path, '.svg') === 4) {
        $variables['site_logo_svg'] = file_get_contents($logo_path);
      }
    }
  }
}

Вот выдержки из cloud_theme.libraries:

брендинг сайта:
  CSS:
    составная часть:
      dist/css/site-branding.css: {}

Вот мой файл site-branding.css:

/**
 * @файл
 * Визуальные стили для блока брендинга сайта в теме Cloud.
 */

.сайт-логотип {
  отображение: встроенный блок;
  поле справа: 1em; /* LTR */
  нижняя граница: 0,286 em;
  нижняя граница: 0;
}
[каталог = "rtl"] .сайт-логотип {
  поле справа: 0;
  поле слева: 1em;
}
.сайт-текст {
  отображение: встроенный блок;
  вертикальное выравнивание: сверху;
}

@media все и (минимальная ширина: 461px) {
  .сайт-текст {
    нижняя граница: 1.857em;
  }
}

@media все и (минимальная ширина: 901px) {
  .сайт-текст {
    заполнение: 1.286em 0 0;
  }
}
.Название сайта {
  цвет: #686868;
  размер шрифта: 1.6em;
  высота строки: 1;
}

@media все и (минимальная ширина: 901px) {
  .Название сайта {
    размер шрифта: 1.821em;
  }
}
.сайт-слоган {
  поле сверху: 7px;
  интервал между словами: 0.1em;
  семейство шрифтов: "Helvetica Neue", Helvetica, Arial, без засечек;
  размер шрифта: 0,929 em;
  стиль шрифта: курсив;
}

Вот мой файл block--system-branding-block.html.twig:

{% расширяет "block.html.twig" %}
{#
/**
 * @файл
 * Реализация облачной темы для блока брендинга.
 *
 * Каждая переменная элемента брендинга (логотип, название, слоган) доступна только при
 * включено в конфигурации блока.
 *
 * Доступные переменные:
 * - site_logo: логотип для сайта, как указано в настройках внешнего вида или темы.
 * - site_name: имя для сайта, как указано в настройках информации о сайте.
 * - site_slogan: Слоган для сайта, как указано в настройках информации о сайте.
 */
#}
{% набор атрибутов = атрибуты.addClass('сайт-брендинг') %}
{% заблокировать содержимое %}
  {% если логотип сайта %}
    <a href="{{ path('<front>') }}" rel="home" class="site-logo">
      <img src="{{ site_logo }}" alt="{{ 'Главная'|t }}" />
    </a>
  {% конец%}
  {% если site_name или site_slogan %}
    <div class="сайт-текст">
      {% если имя_сайта %}
        <div class="имя-сайта">
          <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
        </div>
      {% конец%}
      {% если site_slogan %}
        <div class="site-slogan">{{ site_slogan }}</div>
      {% конец%}
    </div>
  {% конец%}
{% конечный блок%}

Я не могу понять, чего мне не хватает.