<template>
  <section :id="id" class="iniciativa-section">
    <div class="iniciativa-header">
      <h3>Una iniciativa colectiva</h3>
      <p>
        kit-ECO.social es posible gracias al trabajo conjunto de organizaciones
        que apuestan por una economía social transformadora.
      </p>
    </div>

    <ul class="iniciativa-logos">
      <li>
        <img 
          src="/assets/img/logo-enreda.png"
          alt="Logo de Enreda"
        />
      </li>
      <li>
        <img 
          src="/assets/img/logo-nortes.png"
          alt="Logo de Nortes"
        />
      </li>
      <li>
        <img 
          src="/assets/img/logo-ecored.png"
          alt="Logo de Ecored"
        />
      </li>
    </ul>
  </section>
</template>

<style lang="scss" scoped>
.iniciativa-section {
  display: flex;
  flex-direction: column;
  gap: 3rem; // gap-12
  margin-bottom: 2rem; // mb-8
  padding: 2rem 1rem 4rem; // pt-8 px-4 pb-16
  max-width: 48rem; // max-w-3xl
  margin-left: auto;
  margin-right: auto;

  .iniciativa-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;

    h3 {
      font-size: $h3;
      font-weight: $bold;
      margin-bottom: 1.5rem; // mb-6
    }

    p {
      font-size: 1.125rem; // text-lg
      text-align: center;
    }
  }

  .iniciativa-logos {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem; // gap-8
    list-style: none;
    padding: 0;

    li {
      grid-column: span 12;
      height: 5rem; // h-20
      display: flex;
      align-items: center;
      justify-content: center;

      @media (min-width: 768px) {
        grid-column: span 4;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(100%);
      }
    }
  }
}
</style>
