<script>
  import placeholder from "$lib/zhen/cv-comps/400x400.png";
  import DTU_Logo from "$lib/zhen/cv-comps/DTU_Logo.png";
  import NextLogo from "$lib/zhen/cv-comps/nextKbhLogo.png";
  import SasLogo from "$lib/zhen/cv-comps/SASLogo.png";
  import EmphasysLogo from "$lib/zhen/cv-comps/EmphasysLogo.png";

  import IconAndText2 from "./IconAndText2.svelte";
</script>

<div class="container h-10">
  <div>
    <b style="text-align:left;"> Education </b>
  </div>
  <div class="flex justify-center p-2 w-full">
    <IconAndText2 logo={DTU_Logo}>
      <b>DTU</b><br />
      <p style="font-size: 0.5rem;">AI and data</p>
    </IconAndText2>
    <IconAndText2 logo={NextLogo}>
      <b>Next</b><br />
      <p style="font-size: 0.5rem;">Computer science</p>
    </IconAndText2>
    <IconAndText2 logo={SasLogo}>
      <b>Master class</b><br />
      <p style="font-size: 0.5rem;">SAS Programming</p>
    </IconAndText2>
    <IconAndText2 logo={EmphasysLogo}>
      <span class="font-semibold">Emphasys center</span><br />
      <p style="font-size: 0.5rem;">VR development</p>
    </IconAndText2>
  </div>
</div>

<style lang="scss">
  .container {
    display: grid;
    place-items: center;
    width: 90%;

    > div:first-child {
      border-bottom: black 1mm solid;
      width: 100%;
    }
  }
</style>

