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

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

@media (min-width: $explorer-breakpoint-landscape) {
  %explorer-container-height { 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);
  }
}