.l-section {
  grid-column: main-start / main-end;
  display: grid;
  padding: 15rem 0;

  &--simple {
    grid-template-columns: [section-start] 1fr [section-end];
  }

  &--auto {
    grid-template-columns: [section-start] repeat(auto-fit, minmax(100vw, 1fr)) [section-end];

    @include respond-to('tiny') {
      grid-template-columns: [section-start] repeat(auto-fit, minmax(40vw, 1fr)) [section-end];
    }

    @include respond-to('large') {
      grid-template-columns: [section-start] repeat(auto-fit, minmax(0, 1fr)) [section-end];
    }
  }


  &__content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100vw, 1fr));

    @include respond-to('tiny') {
      grid-template-columns: repeat(auto-fit, minmax(40vw, 1fr));
    }

    @include respond-to('large') {
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
  }
}