.spotlight-header {
  display: grid;
  grid-template-columns: clamp(112px, 13vw, 146px) minmax(0, 1fr);
  grid-template-areas: "art name" "art tip";
  grid-template-rows: auto 1fr;
  gap: .85rem clamp(16px, 3vw, 30px);
  align-items: start;
  padding-block: 8px 10px;
}
.spotlight-art { grid-area: art; margin: 0; }
.spotlight-art a, .spotlight-art img { display: block; }
.spotlight-art img { width: 100%; height: auto; border-radius: 5%; }
.spotlight-art figcaption {
  margin-top: .5rem;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.spotlight-name { grid-area: name; align-self: end; }
.spotlight-name h2 { margin-bottom: .3rem; }
.spotlight-name .english { overflow-wrap: anywhere; }
.spotlight-tip { grid-area: tip; }
@media (max-width: 820px) {
  .spotlight-header {
    grid-template-columns: clamp(96px, 22vw, 130px) minmax(0, 1fr);
    grid-template-areas: "art name" "tip tip";
    grid-template-rows: auto auto;
    row-gap: 1.1rem;
  }
  .spotlight-name { align-self: center; }
}