.branding-block svg {
  --svg--height: 7rem;
  --svg--path--fill: var(--highlight-color);
  --svg--rect--stroke: var(--highlight-color);
}
.branding-block__logo-group {
  display: grid;
}
.branding-block__brand-logo {
  opacity: 0;
  height: 1.5rem;
  grid-column: 1;
  grid-row: 1;
  transition: all 200ms ease-in-out;
  width: 0;
  pointer-events: none;
}
.branding-block__mini-logo {
  display: flex;
  gap: 0.25em;
  grid-column: 1;
  grid-row: 1;
  opacity: 1;
  height: 1.5rem;
  transition: all 200ms ease-in-out;
  place-self: center;
}
.branding-block__mini-logo-square, .branding-block__mini-logo-circle {
  background-color: var(--highlight-color);
  aspect-ratio: 1;
  display: inline-block;
  transition: border-radius 200ms ease-in-out;
}
.branding-block__mini-logo-circle {
  border-radius: 100%;
}
.branding-block a:hover .branding-block__mini-logo-square, .branding-block a:focus-visible .branding-block__mini-logo-square {
  border-radius: 100%;
}
.branding-block a:hover .branding-block__mini-logo-circle, .branding-block a:focus-visible .branding-block__mini-logo-circle {
  border-radius: 0;
}
@media (width > 32rem) {
  .branding-block__brand-logo {
    opacity: 1;
    height: 7rem;
    width: auto;
    pointer-events: all;
  }
  .branding-block__mini-logo {
    opacity: 0;
  }
  [data-site-header-small] .branding-block__brand-logo {
    pointer-events: none;
    opacity: 0;
    width: 0;
    height: 1.5rem;
  }
  [data-site-header-small] .branding-block__mini-logo {
    opacity: 1;
  }
}
