@mixin vf-p-section {
  .p-section,
  .p-section--hero {
    // same as %section-padding--default
    padding-bottom: $spv--strip-regular * 0.5;

    @media (min-width: $breakpoint-large) {
      padding-bottom: $spv--strip-regular;
    }
  }

  .p-section--deep {
    // same as %section-padding--default
    padding-bottom: $spv--strip-deep * 0.5;

    @media (min-width: $breakpoint-large) {
      padding-bottom: $spv--strip-deep;
    }
  }

  .p-block, // deprecated, use .p-section--shallow
  .p-section--shallow {
    // same as %section-padding--shallow
    padding-bottom: $spv--x-large;
  }

  // hero section has additional top padding (as it appears on the top of the page)
  .p-section--hero {
    padding-top: $spv--large;

    // on large screens, same as %section-padding--shallow
    @media (min-width: $breakpoint-large) {
      padding-top: $spv--x-large;
    }
  }

  // Branded chip in a hero uses an 8px icon-to-text gap (hero spacing spec).
  // Scoped to the hero so the shared .p-chip--branded (4px gap) is unchanged.
  .p-section--hero .p-chip--branded {
    gap: $sph--small;
  }
}