/* Loaded for the widths at which Home is set to full height. Keep every track free to grow. */
#pg-operator-devices .gd-editorial {
  min-block-size: var(--pg-screen-height, 100svh);
  padding-block-start: calc(var(--pg-home-header-height, 64px) + clamp(16px, 2.4svh, 28px));
  padding-block-end: clamp(24px, 5svh, 60px);
}

@container gearScreen (min-width: 611px) {
  #pg-operator-devices .gd-editorial {
    --pitch: clamp(52px,4cqi,62px);
    --image-w: clamp(214px, 24cqi, 290px);
    --image-h: clamp(150px, 22svh, 210px);
    --compact-w: clamp(150px, 18cqi, 205px);
    --compact-h: clamp(132px, 19svh, 178px);
    /* The two flexible gaps share the spare height. Labels stay with the product. */
    grid-template-areas:
      "heading  heading"
      ".        ."
      "drum     photo"
      ".        type"
      ".        name"
      ".        ."
      "controls link";
    grid-template-rows: auto minmax(24px, 1fr) auto auto auto minmax(20px, .7fr) auto;
    row-gap: 0;
  }
  #pg-operator-devices .gd-editorial:not([data-single="true"]) { --wheel-height: clamp(252px, 38svh, 344px); }
  #pg-operator-devices .gd-editorial[data-single="true"] { --wheel-height: calc(var(--image-h) + 48px); }
  #pg-operator-devices :is(.gd-picker, .gd-card, .gd-foot) { display: contents; }
  #pg-operator-devices .gd-intro { grid-area: heading; }
  #pg-operator-devices :is(.gd-wheel, .gd-static) { grid-area: drum; align-self: center; }
  #pg-operator-devices .gd-preview { grid-area: photo; align-self: center; }
  #pg-operator-devices .gd-type { grid-area: type; text-align: center; }
  #pg-operator-devices .gd-name { grid-area: name; margin: 6px 0 0; text-align: center; }
  #pg-operator-devices .gd-tools { grid-area: controls; align-self: center; margin: 0; }
  #pg-operator-devices .gd-link { grid-area: link; place-self: center end; }
}

@container gearScreen (max-width: 610px) {
  #pg-operator-devices .gd-editorial {
    --image-w: clamp(118px, 39cqi, 174px);
    --image-h: clamp(128px, 21svh, 186px);
    --compact-w: clamp(104px, 34cqi, 150px);
    --compact-h: clamp(104px, 18svh, 154px);
    --pitch: clamp(48px, 6.4svh, 57px);
    --wheel-height: clamp(156px, 28svh, 250px);
    /* Use a tall phone's height for the product and its neighbouring rows. */
    align-content: center;
    row-gap: clamp(30px, 4.1svh, 40px);
  }
  #pg-operator-devices .gd-card { grid-template-columns: clamp(110px, 39cqi, 174px) minmax(0, 1fr); }
  #pg-operator-devices .gd-preview { height: clamp(152px, 24svh, 220px); }
}