<!--
  templateType: section
  label: Grey Out
  isAvailableForNewContent: true
  screenshotPath: ../images/section-previews/blank.svg
  description: "Section with grey-to-white divider transition"
-->
{# Translucent grey (composites to ≈#F3F4F5 on white) so it adapts to dark mode
   without a CSS hook; the wave SVG uses the same translucency. See audit N1. #}
{% dnd_section
  background_color={
    "r": 127,
    "g": 131,
    "b": 139,
    "a": 0.09
  },
  background_image={
    "backgroundPosition": "TOP_CENTER",
    "backgroundSize": "contain",
    "imageUrl": get_asset_url("../images/divider-layeredwave-greyout.svg")
  },
  padding={
    "top": 0,
    "bottom": 100,
    "left": 20,
    "right": 20
  }
%}
  {% dnd_column offset=0, width=12 %}
    {% dnd_row %}
      {% dnd_module "greyout_content"
        path="@hubspot/rich_text",
        label="Content",
        html='<div style="text-align: center;"><h2>Your Content Here</h2><p>This section transitions from grey to white background.</p></div>'
      %}
      {% end_dnd_module %}
    {% end_dnd_row %}
  {% end_dnd_column %}
{% end_dnd_section %}
