<template>
  <MenuVue type="social" />
  <section class="social-section content">
    <h2>{{ $t('social.title') }}</h2>
    <p>{{ $t('social.paragraph1') }}</p>
    <p>{{ $t('social.paragraph2') }}</p>
  </section>
  <section class="social-bottom">
    <div class="left">
      <p>{{ $t('social.paragraph3') }}</p>
      <p>{{ $t('social.paragraph4') }}</p>
    </div>
    <div class="right">
      <img src="@images/kid-coffee.png">
    </div>
  </section>
</template>

<script>
import MenuVue from '../../components/Menu.vue';

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

<style lang="scss" scoped>
  .social-bottom {
    padding: 40px 98px;
    background-image: url('@images/bg_1.png');
    background-position: top left;
    background-size: contain;
    height: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    .left {
      padding: 52px 32px 0 0
    }
    p {
      font-weight: 500;
      color: #603809;
      font-size: 32px;
      line-height: 50px;

    }
  }
</style>