%explorer-container-height {
  margin-top: $explorer-header-small;
  min-height: calc(100vh - #{$explorer-header-small} - #{explorer-size(-1) * 2});
}

@media (orientation: landscape) and (max-height: $explorer-breakpoint-landscape) {
  %explorer-container-height {
    margin-top: $explorer-header-medium;
    min-height: calc(100vh - #{$explorer-header-medium} - #{explorer-size(-1) * 2});
  }
}

@media (min-width: $explorer-breakpoint-landscape) {
  %explorer-container-height {
    margin-top: $explorer-header-large;
    min-height: calc(100vh - #{$explorer-header-large} - #{explorer-size(-1) * 2});
  }
}

.container {
  @extend %explorer-container-height;
  background: explorer-color("slate", "500");
  padding-top: explorer-size(-1);
  padding-bottom: explorer-size(-1);

  &__section {
    display: block;
    padding: 0 explorer-size(-2);
    margin: 0 auto;
  }
}

@media (min-width: $explorer-breakpoint-sm) {
  .container {
    &__section { width: $explorer-breakpoint-sm; }
  }
}

@media (min-width: $explorer-breakpoint-md) {
  .container {
    &__section {
      width: $explorer-breakpoint-md;

      &--partitioned {
        display: flex;
        align-items: top;
        justify-content: top;
      }
    }

    &__subsection {
      flex: 1;
      margin-right: explorer-size(-2);
      & + & { margin-left: explorer-size(-2); }
    }
  }
}

@media (min-width: $explorer-breakpoint-lg) {
  .container {
    &__section { width: $explorer-breakpoint-lg; }
  }
}

@media (min-width: $explorer-breakpoint-xl) {
  .container {
    &__section { width: $explorer-breakpoint-xl; }
  }
}