<script>
export default {
  props: {
    'mini': Boolean,
  },
};
</script>

<template>
  <div class="page-content">
    <div class="main mdc-elevation--z4" :class="{'main--mini': mini}">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.main {
  position: relative;
  display: block;
  width: Calc(100% - 64px);
  max-width: 1024px;
  margin: 20px auto;
  padding: 16px 16px 16px 16px;
  border-radius: 2px;
  background: #FFFFFF;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

.main.main--mini {
  max-width: 400px;
}
</style>