header {
  background: var(--vbx-color-bg-extra-1);
  position: sticky;
  top: var(--drupal-displace-offset-top, 0px);
  left: 0;
  padding: 1vw 1vw;
  z-index: 100;

  .site-branding {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    .logo {
      a {
        img {
          max-width: 300px;
          width: 300px;
        }
      }

    }
    .site-name {
      flex-grow: 1;
      a {
        color: #fff;
        text-decoration: none;
        font-size: 1.3rem;
      }
    }
  }
}

.layout-breadcrumb {
  background: var(--vbx-color-bg-extra-2);
}