<template>
  <div class="prose">
    <slot name="default"></slot>
  </div>
</template>

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

.prose {
  padding: 0 max(1em, env(safe-area-inset-right)) 0
    max(1em, env(safe-area-inset-left));

  h1,
  h2,
  h3,
  p,
  ul,
  blockquote,
  .quickfacts,
  .btn-group {
    @include mq-desktop {
      max-width: 45rem;
      margin: {
        left: auto;
        right: auto;
      }
    }

    @include mq-bigscreen {
      max-width: 55rem;
    }
  }
}
</style>
