.level { border-top: 2px solid var(--ink); margin-top: 2.5rem; padding-top: 1.25rem; }
.level:first-of-type { margin-top: 2rem; }
.level-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.level-head h2 { margin: 0; font-size: 1.625rem; }
.tag { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: 1rem; background: var(--tag); color: var(--tag-ink); padding: 0.2rem 0.55rem; border-radius: 4px; white-space: nowrap; }
.level > p { margin: 0.6rem 0 0; }
.ex { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.ex:last-child { border-bottom: 0; padding-bottom: 0.5rem; }
.shot { display: block; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: #fff; }
.shot img { display: block; width: 100%; height: auto; }
.ex h3 { font-size: 1.25rem; margin: 0 0 0.4rem; letter-spacing: -0.01em; }
.ex h3 a { text-decoration: none; }
.ex h3 a:hover { text-decoration: underline; }
.ex p { margin: 0 0 0.6rem; max-width: 46ch; }
.ex .go { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: 1rem; }
.more { border-top: 2px solid var(--ink); margin-top: 2.5rem; padding: 0.25rem 0 3rem; }
.more h2 { margin-top: 1.25rem; }
@media (min-width: 42rem) {
  .ex { grid-template-columns: 17rem minmax(0, 1fr); align-items: center; }
  .ex.big { grid-template-columns: minmax(0, 1fr); }
  .ex.big p { max-width: 62ch; }
}