/**
 * @file
 * Responsive site branding.
 */

.site-branding__logo img {
  display: block;
  width: auto;
  max-width: min(100%, 300px);
  height: var(--sp2);
  max-height: none;
  filter: none;
}

@media (min-width: 31.25rem) {
  .site-branding__logo img {
    height: var(--sp3);
  }
}

@media (min-width: 43.75rem) {
  .site-branding__logo img {
    width: 300px;
    max-width: 100%;
    height: auto;
  }
}

html[data-theme="dark"] .site-branding__logo img {
  filter: invert(1);
}