<template>
  
  <div class="contact-section">
    <div class="left">
      <h1>{{ $t('contact.title') }}</h1>
      <p v-html="$t('contact.paragraph1')"></p>
      <h3>{{ $t('contact.paragraph2') }}</h3>
      <p>{{ $t('contact.paragraph3') }}</p>
      <p>{{ $t('contact.paragraph4') }}</p>
      <p>{{ $t('contact.paragraph5') }}</p>
      <h3>{{ $t('contact.paragraph6') }}</h3>
      <p>{{ $t('contact.paragraph7') }}</p>
      <p>{{ $t('contact.paragraph8') }}</p>
      <h3>{{ $t('contact.paragraph9') }}</h3>
      <p><a href="https://www.instagram.com/tayrona_foods" target="">Instagram</a></p>
    </div>
    <div class="right"></div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  .contact-section {
    min-height: 100px;
    background-color: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr;

    .left {
      padding: 72px 80px;
    }

    h1 {
      font-weight: 400;
      font-size: 32px;
      line-height: 75px;
    }

    h3 {
      margin-top: 54px;
      font-weight: 400;
      font-size: 18px;
      line-height: 38px;
    }
    p {
      font-weight: 300;
      font-size: 16px;
      line-height: 24px;
    }
  }

  @media only screen and (max-width: 767px) {
    .contact-section {
      .left {
        padding: 36px 16px;
      }
    }
  }
</style>