.block-system-branding-block {
  width: var(--header-logo-width-mobile);
}

@media all and (min-width: 1280px) {
  .block-system-branding-block {
    width: var(--header-logo-width-desktop);
  }
}

.path-frontpage .block-system-branding-block {
  width: var(--header-logo-width-desktop);
}

.block-system-branding-block .site-logo__icon {
  display: block;
  width: 100%;
  height: calc(var(--header-top-height-mobile) - var(--space-16) * 2);
}

@media all and (min-width: 1280px) {
  .block-system-branding-block .site-logo__icon {
    height: calc(var(--header-top-height-desktop) - var(--space-12) * 2);
  }
}

.header-color-white .block-system-branding-block .site-logo__icon {
  transition: fill var(--transition-duration) var(--transition-timing-function);
}

@media all and (min-width: 1280px) {
  .header-color-white .block-system-branding-block .site-logo__icon {
    transition-duration: var(--transition-duration-short);
  }
}

.header-color-white .site-template__header:not(.scrolled):not(.dropdown-visible):not(.side-nav-visible) .block-system-branding-block .site-logo__icon {
  fill: var(--color-1);
}

.path-frontpage .block-system-branding-block .site-logo__icon {
  fill: var(--color-2);
}

.path-frontpage [data-logo-color="#fff"] .block-system-branding-block .site-logo__icon {
  fill: var(--color-1);
}