@import "import";

.section {
  @include flex(column, flex-start, flex-start);
  // background-color: color(background);
  background-color: transparent;
  position: relative;
  width: 100%;
  height: 100%;

  .inner,
  .mdxWrapper,
  .content {
    width: 100%;
    height: 100%;
  }

  .inner,
  .mdxWrapper {
    @include flex(column, flex-start, flex-start, $gap: spacer(sm));
  }

  .content {
    @include flex(column, flex-start, flex-start, $gap: spacer(lg));
  }

  .inner {
    @include global-container(spacer(xl));

    > * {
      width: 100%;
      height: 100%;
    }
  }

  .mdxWrapper {
    > p {
      @include type-item(heading-1);
      text-wrap: pretty;
    }

    > * {
      width: 100%;
      height: 100%;
    }
  }

  &:last-of-type {
    .inner {
      padding-bottom: spacer(sm);
    }
  }
}