TheWebTech

/* CSS styles that highlight the hubspot grid components so you can better visualize what is happening in a page. 
  1. You could use this a few different ways, you could add this to your inspector-stylesheet.css when inspecting a page.
  2. You could integrate this into a browser extension ;)
  3. You could literally upload the stylesheet to HubSpot, and use {% if request.query_dict.hsDebug == "true" %}{{ require_css(PATH TO YOUR CSS FILE) }}{% endif %}
  
  Additionally in-case it's useful as a prototyping/layout planning tool: https://codepen.io/thewebtech/pen/bGdrQyN??editors=1100
*/

.dnd-module {background: #eaf0f6;min-height: 50px!important; }
.dnd-module::before {content:"{% dnd_module %}";}

johnsfuller

/* required css vars
 * --site-width (site max-width)
 * --site-gutter (site container padding)
 * --site-spacing-y (site vertical rhythm)
 * --hs-grid-gap-x (horizontal gap between dnd columns)
 */

.dnd-section {
  padding: 4em 0;
}