.top .brand-logo {
  display: block;
  width: clamp(18rem, 30vw, 24rem);
  justify-self: center;
  line-height: 0;
  text-decoration: none;
  position: relative;
}

.top .brand-logo img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  clip-path: inset(0 2% 0 25.4%);
}

.top .brand-logo::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 25.4%;
  background: url("./texas-handmade-plane-refined-v2.png") center 44% / 92% auto no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.top .brand-logo:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 5px;
}

@media (max-width: 800px) {
  .top .brand-logo {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
    width: min(24rem, 100%);
  }
}