Site branding not displaying correctly

I'm working on a new theme for the Rain distribution (Drupal 9), but I'm having a hard time showing site branding correctly. This is the first time I'm trying to make a theme, so sorry if I ask stupid.

Site_logo, site_name and site_slogan are displayed on top of each other.

Here are excerpts from cloud_theme.theme:

/**
 * Implements hook_preprocess_HOOK().
 */
function cloud_theme_preprocess_block(array &$variables) {
  // Use inline svg in the branding block.
  if ($variables['plugin_id'] == 'system_branding_block') {
    $variables['attributes']['class'][] = 'clearfix';
    if (isset($variables['site_logo'])) {
      $logo_path = DRUPAL_ROOT . $variables['site_logo'];
      // If logo is a SVG lets load it content so we can inline it.
      if (strlen($logo_path) - strpos($logo_path, '.svg') === 4) {
        $variables['site_logo_svg'] = file_get_contents($logo_path);
      }
    }
  }
}

Here are excerpts from cloud_theme.libraries:

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

Here is my site-branding.css file:

/**
 * @file
 * Visual styles for the site branding block in Cloud theme.
 */

.site-logo {
  display: inline-block;
  margin-right: 1em; /* LTR */
  margin-bottom: 0.286em;
  border-bottom: 0;
}
[dir="rtl"] .site-logo {
  margin-right: 0;
  margin-left: 1em;
}
.site-text {
  display: inline-block;
  vertical-align: top;
}

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

@media all and (min-width: 901px) {
  .site-text {
    padding: 1.286em 0 0;
  }
}
.site-name {
  color: #686868;
  font-size: 1.6em;
  line-height: 1;
}

@media all and (min-width: 901px) {
  .site-name {
    font-size: 1.821em;
  }
}
.site-slogan {
  margin-top: 7px;
  word-spacing: 0.1em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.929em;
  font-style: italic;
}

Here is my block--system-branding-block.html.twig file:

{% extends "block.html.twig" %}
{#
/**
 * @file
 * Cloud's theme implementation for a branding block.
 *
 * Each branding element variable (logo, name, slogan) is only available if
 * enabled in the block configuration.
 *
 * Available variables:
 * - site_logo: Logo for site as defined in Appearance or theme settings.
 * - site_name: Name for site as defined in Site information settings.
 * - site_slogan: Slogan for site as defined in Site information settings.
 */
#}
{% 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="{{ 'Home'|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 %}

I can not really figure out what I am missing.