<!-- 
Blog Article: https://andromedagalactic.com/blog/container-queries
Youtube Video: https://youtu.be/TC6iPi1nY8Y
 -->

<h1>Team</h1>
<div id="app" class="wrapper">
  <card v-for="person in people" :person="person"/>
</div>

<template id="cardTemplate">
  <section class="about-container">
    <div class="about-card">
      <img class="about-card_img" :src="person.img" alt="" height="100" width="100">
      <h2 class="about-card_name">{{ person.name }}</h2>
      <div class="about-card_title">{{ person.title }}</div>
      <p class="about-card_bio">{{ person.bio }}</p>
    </div>
  </section>
</template>

/**
 * Blog Article: https://andromedagalactic.com/blog/container-queries
 * Youtube Video: https://youtu.be/TC6iPi1nY8Y
 */

:root {
  font-family: sans-serif;
  --primary: slategray;
}

* {
  box-sizing: border-box;
}
p {
  line-height: 1.5;
}

.wrapper {
  display: grid;
  gap: 1rem;
}

.about-container {
  container-type: inline-size;
  container-name: card;
}

.about-card {
  border-radius: 4px;
  box-shadow: 0px 0px 2px var(--primary);
  padding: 1rem;
  text-align: center;
  height: 100%;
}
.about-card_img {
  background: white;
  height: 100px;
  width: 100px;
  object-fit: cover;
  border-radius: 50%;
  border: solid 1px var(--primary);
  display: block;
  margin: 0 auto;
}
.about-card_name {
  margin-bottom: 0;
  color: var(--primary);
}
.about-cared_title {
  font-size: 0.8em;
}

@container card (min-width: 350px) {
  .about-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2fr;
    grid-template-rows: repeat(3, min-content);
    gap: 0 1rem;
  }
  .about-card * {
    margin: 0;
  }
  .about-card_img {
    grid-column: 1;
    margin: 0 auto;
  }
  .about-card_name {
    grid-column: 1;
    grid-row: 2;
    margin-top: 1rem;
    align-self: end;
  }
  .about-card_title {
    grid-column: 1;
    grid-row: 3;
  }
  .about-card_bio {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
  }
}


@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
  section:nth-of-type(1) {
    grid-row: 1 / 3;
  }
  section:nth-of-type(2) {
    grid-column: 2 / 4;
  }
}

/**
 * Blog Article: https://andromedagalactic.com/blog/container-queries
 * Youtube Video: https://youtu.be/TC6iPi1nY8Y
 */

const CardComponent = {
  props: ["person"],
  template: document.querySelector("#cardTemplate")
};

const app = Vue.createApp({
  data() {
    return {
      people: [
        {
          img:
            "https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHBvcnRyYWl0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
          name: "Harper",
          title: "Developer",
          bio:
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, debitis nam! Autem excepturi expedita laudantium accusantium libero maiores. Suscipit ipsum error doloribus doloremque eaque ipsa omnis ratione odio quibusdam sed!"
        },
        {
          img:
            "https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzV8fHBvcnRyYWl0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
          name: "Blake",
          title: "Designer",
          bio:
            "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem, beatae dolore et ea facilis maxime asperiores quidem, quos, fugiat ut laudantium! Omnis voluptatibus atque ut unde corrupti ipsam, aut laborum."
        },
        {
          img:
            "https://images.unsplash.com/photo-1552374196-c4e7ffc6e126?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8cG9ydHJhaXR8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60",
          name: "Morgan",
          title: "Analyst",
          bio:
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum fugiat tempora sit? Perspiciatis, quasi deleniti. Amet reprehenderit ea assumenda, laboriosam distinctio possimus! Placeat dolores odit ab eum dicta temporibus tempore!"
        },
        {
          img:
            "https://images.unsplash.com/photo-1491349174775-aaafddd81942?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NTN8fHBvcnRyYWl0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
          name: "Avery",
          title: "Developer",
          bio:
            "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita, fugiat dolores. Eaque veniam numquam illum vel quibusdam sint ducimus nesciunt iusto nulla quidem suscipit rerum, doloribus nostrum in, perferendis libero?"
        }
      ]
    };
  },
  mounted() {
    console.log("mounted");
  }
});
app.component("card", {
  data() {
    return {};
  },
  props: ["person"],
  template: document.querySelector("#cardTemplate")
});
app.mount("#app");