/* Add your custom styles here */


/* Adds a bit of spacing to "Responsive Grid Row" blocks. */
.crx-grid {
  padding-top: 40px;
  padding-bottom: 40px;
}
.crx-grid .crx-grid {
  padding-top: 0;
  padding-bottom: 0;
}

/* X-ray view. CRX has no block for this, so it arrives as an HTML block and
   relies on these rules; the slider only sets a custom property. */
.cr-xray__stage { position: relative; overflow: hidden; line-height: 0; margin: 0 0 1rem; }
.cr-xray__layer { width: 100%; display: block; }
.cr-xray__layer--outside { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--xray-position, 50%)); }
.cr-xray__slider { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
                   appearance: none; background: transparent; cursor: ew-resize; }
.cr-xray__slider::-webkit-slider-thumb { appearance: none; width: 44px; height: 44px; opacity: 0; }
.cr-xray__slider::-moz-range-thumb { width: 44px; height: 44px; opacity: 0; border: none; }
.cr-xray__handle { position: absolute; top: 0; bottom: 0; left: var(--xray-position, 50%);
                   width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; }
.cr-xray__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px;
                          margin: -20px 0 0 -20px; border: 2px solid #fff; border-radius: 50%;
                          background: rgba(0,0,0,.25); }
.cr-xray__caption { font-size: .9rem; color: #6c757d; }

/* The x-ray block sits at the top level of the body, outside the container
   every other section gets, so it needs its own width. */
.cr-xray { max-width: 1320px; margin: 0 auto; padding: 0 12px; }