/* Best cars to rent for e-hailing · src/seo/best-cars-to-rent-e-hailing.html
   Kept separate from seo.css so the shared stylesheet (shared by 15 other
   pages) is not grown for one page's needs. */

.cost-table td:first-child strong { display: block; }
.cost-table td:first-child .car-body { font-size: .84rem; color: var(--muted); }
.cost-table thead th { font-size: .82rem; line-height: 1.25; }

/* One car = one row: photo beside the argument, so the reader never has to
   match a picture to a paragraph somewhere else on the page. */
.car {
  display: grid;
  gap: 1rem;
  margin: 1.4rem 0;
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.car img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
  background: var(--paper);
}
.car-copy h3 { margin: 0 0 .2rem; font-size: 1.1rem; }
.car-copy p { margin: 0 0 .5rem; }
.car-meta {
  color: var(--green-dark);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.fineprint-note {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}

/* Photo credits: CC BY and CC BY-SA both require attribution and a link to the
   licence, so this is content, not decoration. */
.photo-credits {
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .82rem;
}
.photo-credits h2 { font-size: .95rem; margin: 0 0 .4rem; }
.photo-credits ul { padding-left: 1.1rem; margin: 0; }
.photo-credits li { margin-bottom: .25rem; }

@media (min-width: 700px) {
  .car {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1.3rem;
    align-items: start;
  }
  .car img { aspect-ratio: 4 / 3; }
}