/* Shared four-direction geometry: only the upper pair moves outward. */
:root {
  --air-drum-top-outset: clamp(18px, 2.4vw, 36px);
}

#mappingPage .slot-grid > .slot:nth-child(1),
.performance-grid > .perform-slot:nth-child(1),
.xipu-performance-grid > .xipu-slot:nth-child(1) {
  transform: translateX(calc(-1 * var(--air-drum-top-outset)));
}

#mappingPage .slot-grid > .slot:nth-child(2),
.performance-grid > .perform-slot:nth-child(2),
.xipu-performance-grid > .xipu-slot:nth-child(2) {
  transform: translateX(var(--air-drum-top-outset));
}

@media (max-width: 750px) {
  :root {
    --air-drum-top-outset: clamp(8px, 2vw, 14px);
  }
}