%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; }
}

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