<div class="container">
    <div>
        <b style="text-align:left;">
            Other
        </b>
    </div>
    <div class="table-display">
        <div class="table-item">
            <div>Itch.io</div>
            <a href="https://github.com/MagicBOTAlex">botalex.itch.io</a>
        </div>
        <div class="table-item">
            <div>Github</div>
            <a href="https://botalex.itch.io/">@MagicBOTAlex</a>
        </div>
    </div>
</div>

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

    .container > div:first-child {
        width: 100%;

        /* Bottom border stripe*/
        border-bottom: 1mm solid var(--left-line-color);
    }

    .table-display {
        width: 100%;
    }

    .table-item {
        display: flex;
        justify-items: start;

        width: 100%;
        border-bottom: 0.25mm solid #000000;

        > a {
            text-decoration: underline;
        }

        > div, > a {
            &:first-child {
                width: 35%;
                font-size: 4mm;

                display: grid;
                place-content: center start;

                border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
            }

            &:nth-child(2) {
                width: 65%;

                font-size: 3.25mm;
                display: grid;
                place-content: center;

                padding-left: 1mm;
            }
        }
    }
</style>
