<script>
    import ContributorButton from "../atoms/ContributorButton.svelte";
</script>

<div class="social-host">
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>    
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
    <ContributorButton></ContributorButton>
</div>

<style>
	div {
		display: grid;
		grid-column: 9;
		gap: 100px;
		grid-column-start: 1;
		grid-column-end: 9;
	}
    .social-host {
        width: 100;
        justify-content: space-between;
		align-items: center;
        display: flex;
        margin-left: 5rem;
        margin-right: 5rem;
    }
</style>