%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: #f5f7fa; 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-md) { .container { &__section { &--partitioned { display: flex; justify-content: space-between; align-items: stretch; } } &__subsection { flex: 1; margin-right: explorer-size(-2); & + & { margin-left: explorer-size(-2); } } } }