.brand-view {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-base);
  text-decoration: none;
  width: fit-content;
}

.brand-view[data-size='default'] {
  gap: var(--spacing-8);
  flex-direction: row;
}

.brand-view[data-size='hero'] {
  gap: var(--spacing-16);
  flex-direction: column;
  margin-inline: auto;
}

.brand-view .brand-logo {
  display: flex;
  align-items: center;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.brand-view[data-size='default'] .brand-logo {
  height: min(calc((100cqw - var(--spacing-8)) * 2 / 6.2), var(--size-64));
}

.brand-view[data-size='default'] .brand-logo .logo-view {
  width: min(calc((100cqw - var(--spacing-8)) * 2 / 6.2), var(--size-64));
  height: min(calc((100cqw - var(--spacing-8)) * 2 / 6.2), var(--size-64));
}

.brand-view[data-size='hero'] .brand-logo {
  height: var(--size-256);
}

.brand-view[data-size='hero'] .brand-logo .logo-view {
  width: var(--size-256);
  height: var(--size-256);
}

.brand-view .brand-title {
  font-family: var(--typography-font-mono);
  color: var(--color-blue);
  display: inline-block;
  background-color: var(--background-color-base);
}

.brand-view[data-size='default'] .brand-title {
  font-size: min(calc((100cqw - var(--spacing-8)) / 6.2), var(--size-32));
  line-height: 1.3125;
}

.brand-view[data-size='hero'] .brand-title {
  font-size: 64px;
  line-height: 74px;
}

.brand-view .brand-text {
  display: inline-flex;
  flex-direction: column;
  width: max-content;
  align-items: center;
  justify-content: center;
}