@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;
    }
  }
}