<template>
  <div class="module-page">
    <module-navigation/>
    <router-view/>
  </div>
</template>

<script>
  import ModuleNavigation from '@/components/modules/ModuleNavigation.vue';

  export default {
    components: {
      ModuleNavigation
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_mixins.scss";

  .module-page {
    display: flex;
    @supports (display: grid) {
      display: grid;
    }
    justify-items: center;

    @include desktop {
      grid-template-columns: 1fr;
    }

    /*
     * For IE10+
     */
    -ms-grid-columns: 2fr 6fr 2fr;

    & > :nth-child(1) {
      -ms-grid-column: 1;
      -ms-grid-column-align: center;
    }
    & > :nth-child(2) {
      -ms-grid-column: 2;
      -ms-grid-column-align: center;
    }
  }
</style>
