:root {
  --elimu-logo-nav: 64px;
  --elimu-logo-compact: 48px;
  --elimu-logo-auth: 88px;
  --elimu-logo-hero: 120px;
  --elimu-logo-footer: 40px;
  --elimu-logo-sidebar: 36px;
  --elimu-logo-admin: 36px;
}

.elimu-logo {
  display: block;
  height: auto;
  width: auto;
  max-height: var(--elimu-logo-nav);
  max-width: var(--elimu-logo-nav);
  object-fit: contain;
}

.elimu-logo--compact {
  max-height: var(--elimu-logo-compact);
  max-width: var(--elimu-logo-compact);
}

.elimu-logo--auth {
  max-height: var(--elimu-logo-auth);
  max-width: var(--elimu-logo-auth);
}

.elimu-logo--hero {
  max-height: var(--elimu-logo-hero);
  max-width: var(--elimu-logo-hero);
}

.elimu-logo--footer {
  max-height: var(--elimu-logo-footer);
  max-width: var(--elimu-logo-footer);
}

.elimu-logo--sidebar {
  max-height: var(--elimu-logo-sidebar);
  max-width: var(--elimu-logo-sidebar);
}

.elimu-logo--admin {
  max-height: var(--elimu-logo-admin);
  max-width: var(--elimu-logo-admin);
}

.elimu-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}