<template>
  <big-carousel :images="slides.social"></big-carousel>
  <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">
    <img src="@images/proyect-soc-new.jpg">
    <p>{{ $t('social.paragraph3') }}<br><br>{{ $t('social.paragraph4') }}</p>
  </section>
</template>

<script setup>
import BigCarousel from '../../components/BigCarousel.vue';
import { slides } from '../../data';
</script>

<style lang="scss" scoped>
  .social-bottom {
    padding: 0px 72px;
    background-position: top left;
    // display: grid;
    // grid-template-columns: 1fr 1fr;
    .left {
      padding: 0 32px 0 0
    }

    img {
      float: right;
      width: 50%;
      padding: 16px
    }
    p {
      font-weight: 500;
      color: #603809;
      font-size: 24px;
      line-height: 40px;

    }
  }

  @media only screen and (max-width: 767px) {
    .social-bottom {
      padding: 16px;

      img {
        float: none;
        width: 100%;
        padding: 0;
      }
    }
  }
</style>