<script setup>
  import BigCarousel from '../../components/BigCarousel.vue';
  import Employee from "../../components/Employee.vue";

  import { slides } from '../../data';
</script>

<template>
  <big-carousel :images="slides.about"></big-carousel>
  <section class="about-section content">
    <h2>{{ $t('about.subtitle1') }}</h2>
    <p>{{ $t('about.paragraph1') }}</p>
    <p>{{ $t('about.paragraph2') }}</p>
    <h2>{{ $t('about.subtitle2') }}</h2>
    <p>{{ $t('about.paragraph3') }}</p>
    <h4>{{ $t('about.subtitle3') }}</h4>
    <div class="employees">
      <Employee class="employee" image="new-alejandro.jpg" name="Alejandro Valderrama" :role="$t('common.rol_managing_partner')" />
      <Employee class="employee" image="new-jose.jpg" name="Jose Lacouture" :role="$t('common.rol_managing_partner')" />
    </div>
  </section>
</template>

<style lang="scss" scoped>
  .about-section {
  }

  

  .employees {
    display: flex;
    justify-content: center;

    .employee {
      margin: 0 150px;
    }
  }

  @media only screen and (max-width: 767px) {
    .employees {
      flex-direction: column;

      .employee {
        margin: 0 8px 32px;
      }
    }
  }
</style>