.lap { margin: 36px 0 0; max-width: 460px; }
@media (max-width: 899px) { .lap { max-width: 280px; } }

.homestead__grid > .lap { margin: 0; }
@media (min-width: 900px) {
  .homestead__grid:has(> .lap) { grid-template-areas: "copy copy" "lap meter"; row-gap: 64px; }
  .homestead__grid:has(> .lap) .homestead__copy {
    grid-area: copy; display: grid; grid-template-columns: 1fr 1fr; column-gap: 96px; align-items: start;
  }
  .homestead__grid:has(> .lap) .homestead__copy .h2 { grid-column: 1 / -1; }
  .homestead__grid:has(> .lap) .homestead__copy > :not(.h2) { margin: 0; }
  .homestead__grid > .lap { grid-area: lap; max-width: 520px; }
  .homestead__grid:has(> .lap) .meter { grid-area: meter; }
}

.lap__map { display: block; width: 100%; height: auto; overflow: visible; }
.lap__layout:not(.is-on) { display: none; }

.lap__edge, .lap__track, .lap__done { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.lap__edge { stroke: var(--line-2); stroke-width: 40; }
.lap__track { stroke: var(--bg-3); stroke-width: 34; }
.lap__done { stroke: var(--accent); stroke-width: 6; }
.lap__flag { stroke: var(--text); stroke-width: 9; stroke-dasharray: 8 8; }

.lap__car { stroke: var(--bg-2); stroke-width: 4; }
.lap__car .car-body { fill: var(--accent); }
.lap__car .car-glass { fill: var(--bg); stroke: none; }
.lap__car .car-hit { fill: transparent; stroke: none; }
.lap__car { -webkit-tap-highlight-color: transparent; }

.lap__caption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
  font: 800 1.25rem/1.1 var(--font-sans); text-transform: uppercase; letter-spacing: -0.01em;
  color: var(--text);
}
.lap__caption span { white-space: nowrap; }
.lap__pct { color: var(--text-2); font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .lap__caption { font-size: 1.05rem; } }