/* Keep Authelia's native PNG underneath as a fallback if the SVG cannot load. */
div:has(> img[src$="/static/media/logo.png"]) {
  display: grid;
  place-items: center;
}
img[src$="/static/media/logo.png"] {
  grid-area: 1 / 1;
  display: block;
  width: min(100%, 320px);
  height: auto;
  margin: 8px auto;
}
div:has(> img[src$="/static/media/logo.png"])::after {
  content: "";
  grid-area: 1 / 1;
  width: min(100%, 320px);
  aspect-ratio: 768 / 240;
  background: url("/branding/sitec-animated-logo.svg") center / contain no-repeat;
  pointer-events: none;
}