.brand {
  position: relative;
  display: flex;
  width: max-content;
  height: auto;
  overflow: visible;
  flex-direction: column;
  align-items: center;
  color: #fff;
  line-height: 1;
  text-decoration: none;
  transform: translateZ(0);
}

.brand-main {
  position: relative;
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -.075em;
  white-space: nowrap;
}

.brand-pointer {
  position: absolute;
  z-index: 2;
  right: -8px;
  top: 14px;
  width: 14px;
  height: 21px;
  background: #fff;
  clip-path: polygon(0 0, 100% 72%, 61% 72%, 80% 100%, 63% 100%, 45% 74%, 18% 100%);
  filter: drop-shadow(1px 1px 0 #090909) drop-shadow(-1px -1px 0 #090909);
  transform: rotate(-9deg);
  transform-origin: 20% 10%;
}

.brand-sub {
  margin-top: 4px;
  font-size: 7px;
  font-weight: 400;
  letter-spacing: .42em;
  transform: translateX(2px);
  white-space: nowrap;
}

@media (max-width: 800px) {
  .brand { width: max-content; height: auto; }
  .brand-main { font-size: 24px; }
  .brand-pointer { right: -7px; top: 12px; width: 13px; height: 19px; }
  .brand-sub { font-size: 6px; }
}