<script lang="ts">
</script>

<div class="rangeContainer">
    {#each [...new Array(24 * 2).keys()] as _}
        <div class="range" />
    {/each}
</div>

<style lang="sass">
    .rangeContainer
        display: grid
        grid-template-columns: repeat(24*2,1fr)
        height: 100%
        .range
            border: 1px solid #999999
            margin: -1px
            &:nth-child(even)
                border-left: 0px
            &:nth-child(odd)
                border-right: 1px solid lighten(#999999,25%)
</style>