.logo {
  display: inline-flex;
  align-items: center;
}

.logo picture,
.logo__img {
  display: block;
}

/* Sized by width, not height: the lockup is 4.4:1 and locking the height
   makes it shrink to nothing on a phone. */
.logo__img {
  width: clamp(150px, 15vw, 210px);
  height: auto;
}

.logo--lg .logo__img {
  width: clamp(180px, 22vw, 280px);
}