<template>
    <ul class="social-icons">
        <li>
            <a href="https://facebook.com/stemmechanics"
                ><ion-icon name="logo-facebook"></ion-icon
            ></a>
        </li>
        <li>
            <a href="https://mastodon.au/@stemmechanics"
                ><ion-icon name="logo-mastodon"></ion-icon
            ></a>
        </li>
        <li>
            <a href="https://www.youtube.com/@stemmechanics"
                ><ion-icon name="logo-youtube"></ion-icon
            ></a>
        </li>
        <li>
            <a href="https://twitter.com/stemmechanics"
                ><ion-icon name="logo-twitter"></ion-icon
            ></a>
        </li>
        <li>
            <a href="https://github.com/stemmechanics"
                ><ion-icon name="logo-github"></ion-icon
            ></a>
        </li>
        <li>
            <a href="https://discord.gg/yNzk4x7mpD"
                ><ion-icon name="logo-discord"></ion-icon
            ></a>
        </li>
        <li>
            <a href="https://www.linkedin.com/company/stemmechanics"
                ><ion-icon name="logo-linkedin"></ion-icon
            ></a>
        </li>
    </ul>
</template>

<style lang="scss">
.social-icons {
    list-style-type: none;
    padding: 0;
    display: flex;
    font-size: 200%;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;

    li {
        margin: 0 !important;
    }
}

@media only screen and (max-width: 768px) {
    .social-icons {
        gap: 16px;
    }
}
</style>
