.logo-10x-course {
  display: inline-block;
  line-height: 0;
}

.logo-10x-course svg {
  display: block;
  height: 100%;
  width: auto;
}

/* Inline variant for use within text - rendered as a true inline so it
   sits inside a text flow without forcing its own line box. */
.logo-10x-course-inline {
  display: inline;
  line-height: inherit;
}

/* The combined lockup is the widest mark in the family and it is one atomic
   inline box - a line cannot break inside it. On a 320px phone a display-sized
   heading therefore pushed it past both edges of the section, clipping the
   terminal prompt on one side and "Architect" on the other. max-width lets it
   scale down to whatever the line has left; height: auto keeps the ratio, and
   neither takes effect while it fits. */
.logo-10x-course-inline svg {
  display: inline;
  width: auto;
  height: auto;
  max-height: 1.25em;
  max-width: 100%;
  vertical-align: middle;
  position: relative;
  top: -2px;
}