/* Versioned asset: taped article pictures shared by the two editorial hubs. */
.guides-hub .guide-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.guides-hub .guide-cards a.illustrated-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 112px;
  grid-template-rows: auto 1fr; column-gap: 22px; row-gap: 14px;
  align-items: start; padding: 28px; border-radius: 22px;
  background: #fffdf9; box-shadow: 0 5px 20px rgb(42 42 29 / 4%);
}
.illustrated-card > .eyebrow { grid-column: 1 / -1; }
.guides-hub .guide-cards .illustrated-card .article-card-copy { grid-column: 1; grid-row: 2; }
.guides-hub .guide-cards .illustrated-card .article-card-copy > strong {
  display: block; font-family: var(--serif); color: var(--ink); font-size: 1.48rem; line-height: 1.22;
  overflow-wrap: anywhere; padding-top: 4px;
}
.guides-hub .guide-cards .illustrated-card .article-card-description {
  display: block; font-family: var(--sans); font-size: .95rem; color: var(--body-ink); line-height: 1.65; margin: 12px 0 0;
}
.article-picture {
  display: block; position: relative; grid-column: 2; grid-row: 2;
  width: 112px; padding: 8px 8px 17px; margin: 16px 0 8px;
  background: #fffefa; border: 1px solid rgb(69 59 39 / 5%);
  border-radius: 2px; transform: rotate(5deg);
  box-shadow: 3px 12px 16px rgb(42 36 24 / 16%);
}
.article-picture::before {
  content: ''; position: absolute; width: 53px; height: 19px; top: -10px;
  left: calc(50% - 26px); transform: rotate(-12deg);
  background: rgb(214 195 143 / 76%); box-shadow: 0 2px 3px rgb(65 52 22 / 6%);
}
.article-picture img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.guide-cards li:nth-child(even) .article-picture { transform: rotate(-4deg); }
.guide-cards li:nth-child(3n) .article-picture::before { transform: rotate(7deg); }
.guides-hub .guide-cards a.illustrated-card:focus-visible { outline: 3px solid var(--brass); outline-offset: 5px; }
.article-illustration { width: min(280px, 85%); margin: 2rem auto 2.5rem; }
.article-illustration img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
nav.crumb { line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .guides-hub .guide-cards a.illustrated-card { padding: 24px 22px; grid-template-columns: minmax(0, 1fr) 88px; column-gap: 18px; }
  .article-picture { width: 88px; padding: 6px 6px 14px; grid-row: 2; }
  .article-picture::before { width: 43px; height: 16px; left: calc(50% - 21px); top: -8px; }
  .guides-hub .guide-cards .illustrated-card .article-card-copy > strong { font-size: 1.4rem; }
}