Thương hiệu trang web không hiển thị chính xác

Tôi đang làm việc trên một chủ đề mới cho bản phân phối Rain (Drupal 9), nhưng tôi gặp khó khăn khi hiển thị thương hiệu trang web một cách chính xác. Đây là lần đầu tiên mình làm theme nên xin lỗi nếu hỏi ngu.

Site_logo, site_name và site_slogan được hiển thị chồng lên nhau.

Đây là đoạn trích từ cloud_theme.theme:

/**
 * Triển khai hook_pre process_HOOK().
 */
function cloud_theme_pre process_block(mảng &$variables) {
  // Sử dụng svg nội tuyến trong khối thương hiệu.
  if ($variables['plugin_id'] == 'system_branding_block') {
    $variables['attributes']['class'][] = 'clearfix';
    if (isset($variables['site_logo'])) {
      $logo_path = DRUPAL_ROOT . $variables['site_logo'];
      // Nếu logo là SVG, hãy tải nội dung của nó để chúng tôi có thể nội tuyến nó.
      if (strlen($logo_path) - strpos($logo_path, '.svg') === 4) {
        $variables['site_logo_svg'] = file_get_contents($logo_path);
      }
    }
  }
}

Đây là đoạn trích từ cloud_theme.libraries:

xây dựng thương hiệu trang web:
  css:
    thành phần:
      dist/css/site-branding.css: {}

Đây là tệp site-branding.css của tôi:

/**
 * @tập tin
 * Kiểu trực quan cho khối thương hiệu trang web trong chủ đề Đám mây.
 */

.site-logo {
  hiển thị: khối nội tuyến;
  lề-phải: 1em; /* LTR */
  lề-đáy: 0,286em;
  đường viền dưới cùng: 0;
}
[dir="rtl"] .site-logo {
  lề phải: 0;
  lề trái: 1em;
}
.site-text {
  hiển thị: khối nội tuyến;
  căn dọc: trên cùng;
}

@media all và (độ rộng tối thiểu: 461px) {
  .site-text {
    lề-đáy: 1.857em;
  }
}

@media all và (độ rộng tối thiểu: 901px) {
  .site-text {
    phần đệm: 1.286em 0 0;
  }
}
.Tên trang web {
  màu: #686868;
  cỡ chữ: 1.6em;
  chiều cao dòng: 1;
}

@media all và (độ rộng tối thiểu: 901px) {
  .Tên trang web {
    cỡ chữ: 1.821em;
  }
}
.site-khẩu hiệu {
  lề trên: 7px;
  khoảng cách giữa các từ: 0,1em;
  họ phông chữ: "Helvetica Neue", Helvetica, Arial, sans-serif;
  cỡ chữ: 0,929em;
  kiểu chữ: nghiêng;
}

Đây là tệp block--system-branding-block.html.twig của tôi:

{% mở rộng "block.html.twig" %}
{#
/**
 * @tập tin
 * Triển khai chủ đề của đám mây cho khối xây dựng thương hiệu.
 *
 * Mỗi biến thành phần thương hiệu (logo, tên, khẩu hiệu) chỉ khả dụng nếu
 * được kích hoạt trong cấu hình khối.
 *
 * Các biến có sẵn:
 * - site_logo: Biểu trưng cho trang web như được xác định trong cài đặt Giao diện hoặc chủ đề.
 * - site_name: Tên cho trang web như được xác định trong cài đặt thông tin trang web.
 * - site_slogan: Khẩu hiệu cho trang như được xác định trong cài đặt thông tin trang.
 */
#}
{% đặt thuộc tính = attribute.addClass('site-branding') %}
{% khối nội dung %}
  {% nếu site_logo %}
    <a href="{{ đường dẫn('<front>') }}" rel="home" class="site-logo">
      <img src="{{ site_logo }}" alt="{{ 'Trang chủ'|t }}" />
    </a>
  {% endif %}
  {% nếu site_name hoặc site_slogan %}
    <div class="site-text">
      {% nếu site_name %}
        <div class="site-name">
          <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
        </div>
      {% endif %}
      {% nếu site_slogan %}
        <div class="site-slogan">{{ site_slogan }}</div>
      {% endif %}
    </div>
  {% endif %}
{% khối cuối %}

Tôi thực sự không thể tìm ra những gì tôi đang thiếu.