$section-padding: 6rem 1rem !default;
$section-padding-small: 3rem 1rem !default;
$section-padding-large: 12rem 1rem !default;

.section {
  --padding: #{$section-padding};
  --padding-small: #{$section-padding-small};
  --padding-large: #{$section-padding-large};

  padding: var(--padding);

  &.is-small {
    --padding: var(--padding-small);
  }

  &.is-large {
    --padding: var(--padding-large);
  }
}