/* Article template (design/final/article.html: its rules are in the global stylesheet). Only what the render needs on
   top of them. */
/* ---------- Latest posts: a one-line title link is a 48px target (inline padding: the rows do not move) ---------- */
.lv-posts h3 a { padding: 12px 0; }

/* ---------- The head's picture (slot CONDITION-HERO-01, hook art-hero), only once one is uploaded: the copy 7fr, the
   picture 5fr on its right; under 1101px it follows the copy, at most 640px wide ---------- */
.art-photo { aspect-ratio: 3 / 2; }
.lv-arthead.art-hero > .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px;
  align-items: center; }
.lv-arthead.art-hero > .wrap > * { margin-block: 0; }
.lv-arthead.art-hero .inner { max-width: none; }
@media (max-width: 1100px) {
  .lv-arthead.art-hero > .wrap { grid-template-columns: 1fr; gap: 40px; }
  .art-photo { max-width: 640px; }
}

/* ---------- Closing band "Find a nearby low vision professional": its picture (slot CONDITION-CONSULT-01) above the
   heading at the prose width, then Find and Call side by side ---------- */
.art-find > .lv-media { aspect-ratio: 3 / 2; margin: 64px 0 0; }
.art-find > .lv-media + h2 { margin-top: 32px; }
.art-find .lv-actions { margin-top: var(--s3); }
@media (max-width: 767px) { .art-find > .lv-media { margin-top: 52px; } }
@media (max-width: 480px) { .art-find .lv-actions .lv-btn { width: 100%; } }