.brand-icon {
  display: block;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2rem;
  object-fit: cover;
  background: var(--paper);
  border-radius: .15rem;
}

.hero-logo {
  width: min(100%, 22rem);
  margin: 0 0 1.2rem;
}

.hero-logo-frame {
  display: block;
  width: 100%;
  padding: clamp(.4rem, 1.5vw, .75rem);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: .8rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .22);
}

.hero-logo-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .35rem;
}

.hero-logo-frame:focus-within {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}