<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">nav {
  display: grid;
  grid-template-columns: 186px auto auto 200px; /* Must equal widths of the images */
  overflow: hidden;
  margin: 0;
  padding: 0;
}

nav &gt; img.left {
  grid-column: 1;
  justify-self: start;
}

nav &gt; img.right {
  grid-column: 4;
  justify-self: end;
}

nav &gt; div.course {
  grid-column: 2;
  justify-self: start;
  display: grid;
  height: 186px; /* Must equal the height of the images, both of which must be the same */
  align-content: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

nav &gt; div.course &gt; p  {
  text-align: center;
  margin: 0;
}

nav &gt; div.course &gt; p.course-number {
  grid-row: 1;
  font-size: 1.5em;
  font-weight: bolder;
  padding: 0.35rem 1rem;
}

nav &gt; div.course &gt; p.course-name {
  grid-row: 2;
  font-size: 1.8em;
  font-weight: bold;
  font-style: italic;
  line-height: 1.2;
  padding: 0.35rem 1rem;
}

nav &gt; div.course &gt; p.course-term {
  grid-row: 3;
  font-size: 1.15em;
  padding: 0.5rem 1rem;
}

nav &gt; div.links {
  grid-column: 3;
  justify-self: start;
  display: grid;
  grid-template-columns: auto auto auto;
  height: 186px; /* Must equal the height of the images, both of which must be the same */
  align-content: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

nav &gt; div.links &gt; a {
  padding: .7em;
  margin: 1em;
  border: 2pt solid black;
}
</pre></body></html>