<template>
  <div class="page-section">
    <h2 v-if="sectionTitle">{{ sectionTitle }}</h2>
    <span v-if="sectionSmallTitle" class="bold-16px">
      {{ sectionSmallTitle }}
    </span>
    <slot />
  </div>
</template>

<script>
export default {
  name: 'PageSection',
  props: {
    sectionTitle: {
      type: String,
      default: '',
    },
    sectionSmallTitle: {
      type: String,
      default: '',
    },
  },
};
</script>

<style lang="scss" scoped>
.page-section {
  margin-bottom: $spacer * 1;
}

h2 {
  @include font-size($h3-font-size);
  margin-bottom: $spacer;
}

.bold-16px {
  display: block;
  margin: 25px 0 16px 0;
}
</style>
