.ds-masthead-monogram {
  display: inline-block;
  height: 4rem;
  vertical-align: top;
  width: 4rem;
  &:focus {
    box-shadow: 0 0 0 0.125rem var(--ds-color-london-20);
    outline: solid transparent;
  }
}

.ds-masthead-logo {
  display: none;
}

@media (--ds-viewport-min-medium) {
  .ds-masthead-logo {
    display: inline-block;
    height: 4rem;
    vertical-align: top;
    width: 8rem;
  }
  .ds-masthead-monogram {
    display: none;
  }
}

@media (--ds-viewport-min-large) {
  .ds-masthead-logo {
    height: 5rem;
    width: 10rem;
    .ds-masthead--secondary & {
      height: 4rem;
      width: 8rem;
    }
  }
}