<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">
    <div>
        <b style="text-align:left;">
            Education
        </b>
    </div>
    <div class="imagesContainer flex justify-center p-2 gap-4" id="balls">
        <IconAndText2 logo={DTU_Logo}>
            <b>DTU</b><br/>
            <p style="font-size: 0.6rem;">
                Artificial intelligence
            </p>
        </IconAndText2>
        <IconAndText2 logo={NextLogo}>
            <b>Next</b><br/>
            <p style="font-size: 0.6rem;">
                Computer science
            </p>
        </IconAndText2>
        <IconAndText2 logo={SasLogo}>
            <b>Master class</b><br/>
            <p style="font-size: 0.6rem;">
                SAS Programming
            </p>
        </IconAndText2>
        <IconAndText2 logo={EmphasysLogo}>
            <b>Emphasys center</b><br/>
            <p style="font-size: 0.6rem;">
                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%;
        }
    }

    .imagesContainer {
        > img {
            border-radius: 5mm;
            filter: drop-shadow(1mm 1mm 1mm #0000009d);
        }
    }
</style>