@import url("./service-scribble-shared.css");

/* This page's own (non-shared, non-JS-dependent) styling has been
   migrated into Elementor's own per-widget "Custom CSS" setting
   (stored in _elementor_data, not a theme file) — see
   6-LIST-REMAINING-GAP.md's "Elementor-native migration" section.
   Migrated as one verbatim block onto elementor-element-3836bc1 (the
   hero banner strip, the first page-content element — this page has
   no .service-detail-page wrapper like most other service pages do).

   Kept here: the @import above (shared with roving-scribble-booth and
   sticker-print-photo-booth, out of scope for a single page), plus the
   rules below targeting .service-scribble-media-col — a class
   main.js's fixScribbleBoothFeatureGridLayout() adds to wrapper
   <div>s it creates at runtime when it physically regroups the "Why
   Book" section's cards into two independently-flowing columns. Those
   wrapper elements don't exist in _elementor_data at all (JS builds
   them fresh on every page load), so there's no widget for a
   custom_css setting to attach to. */
@media (min-width: 768px) {
  body.service-page--scribble-booth .service-scribble-media-col {
    display: flex !important;
    flex-direction: column;
    gap: 24px;
    justify-content: space-between;
  }
  body.service-page--scribble-booth .service-scribble-media-col > .e-con-inner {
    display: contents;
  }
}

@media (max-width: 767px) {
  body.service-page--scribble-booth .service-scribble-media-col,
  body.service-page--scribble-booth .service-scribble-media-col > .e-con-inner {
    display: contents !important;
  }
}