.map-tool-panel { container-type: inline-size; }
.map-tool-panel .map-tool-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.map-tool-panel .map-tool-grid button.map-tool-choice {
  min-height: 112px;
  padding: 14px 12px;
  column-gap: 10px;
  row-gap: 4px;
}
.map-tool-panel .map-tool-grid button.has-illustration {
  grid-template-columns: 24px minmax(0, 1fr) 88px;
}
.map-tool-panel .map-tool-grid button.map-tool-choice > span:not(.map-tool-swatch) {
  grid-column: 2;
  align-self: end;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.map-tool-panel .map-tool-grid button.map-tool-choice > small {
  grid-column: 2;
  align-self: start;
}
.map-tool-panel .map-tool-grid .map-tool-illustration {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: block;
  width: 88px;
  height: 76px;
  max-width: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}
.map-tool-panel .map-tool-grid .map-tool-illustration-pedestrian-route { height: 42px; }
.map-tool-panel .map-tool-grid .map-tool-illustration-site-access,
.map-tool-panel .map-tool-grid .map-tool-illustration-flagger { height: 72px; }



@container (max-width: 300px) {
  .map-tool-panel .map-tool-grid button.has-illustration { grid-template-columns: 24px minmax(0, 1fr); }
  .map-tool-panel .map-tool-grid .map-tool-illustration { grid-column: 2; grid-row: 3; justify-self: start; height: 60px; margin-top: 6px; }
  .map-tool-panel .map-tool-grid .map-tool-swatch { grid-row: 1 / span 2; }
}

/* Give the long footprint illustration its own row; keep labels readable. */
.map-tool-panel .map-tool-grid button:has(.map-tool-illustration-pedestrian-route) {
  grid-template-columns: 24px minmax(0, 1fr);
}
.map-tool-panel .map-tool-grid .map-tool-illustration-pedestrian-route {
  grid-column: 2;
  grid-row: 3;
  width: 190px;
  height: 38px;
  justify-self: start;
  align-self: center;
  margin-top: 4px;
}