<!--
  templateType: section
  label: Grey Section
  isAvailableForNewContent: true
  screenshotPath: ../images/section-previews/blank.svg
  description: "Section with solid grey background"
-->
{# Translucent grey: composites to ≈#E0E1E3 on white and to an elevated grey on
   the dark page background, so it stays readable in both modes with no CSS hook
   (css_class isn't a supported dnd_section param — see PageSpeed/AI audit N1). #}
{% dnd_section
  background_color={
    "r": 127,
    "g": 131,
    "b": 139,
    "a": 0.24
  },
  padding={
    "top": 60,
    "bottom": 60,
    "left": 20,
    "right": 20
  }
%}
  {% dnd_column offset=0, width=12 %}
    {% dnd_row %}
      {% dnd_module "grey_content"
        path="@hubspot/rich_text",
        label="Content",
        html='<div style="text-align: center;"><h2>Your Content Here</h2><p>This section has a translucent grey background that adapts to light and dark mode.</p></div>'
      %}
      {% end_dnd_module %}
    {% end_dnd_row %}
  {% end_dnd_column %}
{% end_dnd_section %}
