/* Show the four supplied category pictures from the intact reference image. */
.division-picture {
  --picture-size: 52px;
  display: block;
  flex: 0 0 var(--picture-size);
  width: var(--picture-size);
  height: var(--picture-size);
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
  background-image: url('assets/division-pictures-reference.png');
  background-repeat: no-repeat;
  background-size: calc(var(--picture-size) * 13.462963) calc(var(--picture-size) * 4.638889);
  box-shadow: 0 0 0 1px #d9e2e7;
}
.division-picture-foot { background-position: calc(var(--picture-size) * -.324074) calc(var(--picture-size) * -.240741); }
.division-picture-trauma { background-position: calc(var(--picture-size) * -7.12037) calc(var(--picture-size) * -1.814815); }
.division-picture-joints { background-position: calc(var(--picture-size) * -7.12037) calc(var(--picture-size) * -.240741); }
.division-picture-upper { background-position: calc(var(--picture-size) * -.324074) calc(var(--picture-size) * -3.388889); }
.division-name { min-width: 0; line-height: 1.35; }
.divisions button { gap: 12px; min-width: 0; padding: 17px 14px; }
.divisions button[aria-pressed="true"] .division-picture { box-shadow: 0 0 0 2px #fff; }
@media (max-width: 680px) {
  .divisions button { display: grid; grid-template-columns: 38px minmax(0,1fr); column-gap: 9px; row-gap: 4px; padding: 12px; }
  .division-picture { --picture-size: 38px; grid-row: 1 / span 2; }
  .division-name { font-size: 13px; }
  .divisions .count { grid-column: 2; justify-self: start; margin: 0; min-width: 0; height: auto; background: transparent; font-size: 11px; opacity: .75; }
}