.logo .logo-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  overflow: hidden;
  border: 1px solid rgba(63, 126, 208, .2);
  border-radius: 10px;
  background-color: #F3F7FF;
  background-image: url("./maiacoach-symbol.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 108px 108px;
  box-shadow: 0 5px 16px rgba(2, 32, 94, .14);
  color: transparent;
  font-size: 0;
}

.logo .logo-wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  white-space: nowrap;
}

.logo .logo-name {
  display: block;
  font-size: 1em;
  line-height: 1.06;
}

.logo .logo-byline {
  display: block;
  margin-top: 2px;
  color: inherit;
  opacity: .78;
  font: 600 10px/1.1 Inter, sans-serif;
  letter-spacing: .09em;
}

.logo .logo-byline strong {
  font-weight: 800;
}

@media (max-width: 360px) {
  .logo .logo-mark {
    width: 33px;
    height: 33px;
    flex-basis: 33px;
    background-size: 100px 100px;
  }
}