.region-header {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-areas: "logo name" "menu menu";
}

#block-sitelogo {
  grid-area: logo;
  align-self: center;
}

.site-logo {
  display: flex;
}

#block-sitename {
  align-self: center;
  grid-area: name;
}

.site-name a {
  font-size: 1.5rem;
  color: var(--text-color);
}

#block-silence-main-menu {
  grid-area: menu;
}

@media (min-width: 400px) {
  .region-header {
    display: grid;
    grid-template-columns: 3rem 1fr;
    grid-column-gap: 1.5rem;
    grid-row-gap: 0.5rem;
    grid-template-areas: "logo name" "logo menu";
  }
}

@media (min-width: 800px) {
  .region-header {
    grid-template-areas: "logo name menu";
    align-items: center;
  }
}