[Bug]: Modal footer padding not consistent to modal content area

[gselderslaghs]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

The Materialize modal footer is not respecting the Material guidelines

Current Behavior

When implementing the Materialize modal, the footer is not respecting the Material guidelines, padding-bottom is hard-coded at 4px while guidelines suggest a padding of 24px
Comparing the Modal component footer section against the Modal component content sections, inner paddings are not appropriate aligned against eachother

Screenshots

Footer padding is not aligned with content padding, right bottom button corner is cut off

Expected behavior

Modal should respect the inner paddings as described by the Material guidelines
Buttons should be fully visible when placed in the footer

Possible Solutions or Causes

Apply modal-padding variable in Modal component footer element styling and remove fixed height

Steps to reproduce

1. Implement the Modal component
2. Try out these scenarios
   2.1. Inspect the paddings with browser inspector: paddings not consistent
   2.2. Try out a different button styling as proposed: button corner is cut off

Your Environment

• Version used: 2.1.1
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Additional information you want to tell us: