@layer component.layout {
  .section {
    padding-inline: var(--section-gap);
  }

  .section__inner {
    margin-inline: auto;
    --padding-small: 0;
    --padding-large: 0;
    --section-gap: 0;
  }

  .section--width_full {
    box-sizing: content-box;
    padding: 0;
  }

  .section--width_wide > .section__inner {
    max-width: var(--wide-width);
  }

  .section--width_content > .section__inner {
    max-width: var(--content-width);
  }

  .section--width_narrow > .section__inner {
    max-width: var(--narrow-width);
  }

  .section--spacing__top-small {
    padding-top: var(--padding-small, 0);
  }

  .section--spacing__top-large {
    padding-top: var(--padding-large, 0);
  }

  .section--spacing__bottom-small {
    padding-bottom: var(--padding-small, 0);
  }

  .section--spacing__bottom-large {
    padding-bottom: var(--padding-large, 0);
  }
}