cyb/src/components/MainContainer/styles.module.scss

@use '../../layouts/variables.module.scss' as *;

.wrapper {
  width: 62%;
  margin: 0 auto;
  display: grid;
  align-items: flex-start;

  // padding for action bar, if scroll bottom
  padding-bottom: $actionBarHeight;

  @media (max-width: 650px) {
    width: 82%;
  }

  @media (max-width: 540px) {
    width: 100% !important;
    padding-bottom: calc(#{$actionBarHeight} + 100px);
  }

  >main {
    // same with menu
    min-height: 100%;

    // stretch children by height
    display: grid;

    >header {
      // because of grid
      align-self: flex-start;
    }
  }
}