.brand-logo-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  background: linear-gradient(135deg, var(--accent, #4F46E5), var(--color-primary, #6366F1));
}

.brand-logo-shell-sm {
  width: 2rem;
  height: 2rem;
  border-radius: 0.75rem;
}

.brand-logo-shell-md {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  margin-left: auto;
  margin-right: auto;
}

.brand-logo-glyph {
  display: block;
  object-fit: contain;
}

.brand-logo-glyph-sm {
  width: 1.25rem;
  height: 1.25rem;
}

.brand-logo-glyph-md {
  width: 2rem;
  height: 2rem;
}

.brand-logo-hover-wrap {
  flex-shrink: 0;
  transition: transform 300ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1));
}

.group:hover .brand-logo-hover-wrap,
.brand-link:hover .brand-logo-hover-wrap {
  transform: scale(1.05);
}