/* Responsive screenshots - automatically fit container width */
.screenshot {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  margin: 12px 0;
}

/* Centered standalone inline images like Count von Count */
.count-von-count {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px 0;
}

/* Utility: center inline/replaced content within the current text column */
.center-inline { display: flex; justify-content: center; }

/* Make first two screenshots smaller */
.usage-section li:nth-child(1) .screenshot,
.usage-section li:nth-child(2) .screenshot {
  max-width: clamp(240px, 45vw, 350px);
  width: 100%;
}

/* Leave screenshot #3 at natural size to avoid blur */
.usage-section li:nth-child(3) .screenshot { max-width: none; width: auto; }

/* Inline icon alignment within copy */
.inline-icon { height: 1em; width: auto; vertical-align: -0.15em; }

/* Count von Count image styling - responsive sizing */
.count-von-count {
  max-width: 100%;
  height: auto;
  width: clamp(80px, 15vw, 120px); /* Scales with viewport */
  vertical-align: -0.1em;
  margin: 0 0.1em;
}