/* Brand — change these lines to rename/recolor everywhere */
:root {
  --brand-first: "Kalina";
  --brand-second: "Desk";
  --brand-first-color: var(--color-black);
  --brand-second-color: var(--color-red);
  --brand-gap: " ";
}

.brand {
  display: inline;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-decoration: none;
}

.brand--img {
  display: block;
  max-width: 100%;
  height: auto;
}

.brand__first::before {
  content: var(--brand-first);
  color: var(--brand-first-color);
}

.brand__gap::before {
  content: var(--brand-gap);
}

.brand__second::before {
  content: var(--brand-second);
  color: var(--brand-second-color);
}