<script lang="ts">
    export let col: Column
</script>

<div class="topDown">
    {#each col.topDown.rows as row}
        <div class="row">
            <div class="capital">{row.inital}</div>
            <div class="details">
                <div class="upper">{row.rest}</div>
                <div class="lower">{row.description}</div>
            </div>
        </div>
    {/each}
</div>

<style lang="less">
    @import "../../assets/css/main.less";
    .topDown {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 20px;
        .row {
            display: flex;
            gap: 10px;
            .capital {
                display: flex;
                justify-content: center;
                align-items: center;
                min-width: 60px;
                min-height: 100px;
                padding: 10px;
                background-color: @bg-color-secondary;
                color: @font-color-secondary;
                font-family: "LibreCaslonText";
                font-size: 1.7rem;
                @media @desktop {
                    font-size: 2.3rem;
                    min-width: 80px;
                    height: 120px;
                }
            }
            .details {
                min-height: 100px;
                padding-top: 35px;
                display: flex;
                flex-direction: column;
                .upper {
                    line-height: 1;
                    font-family: "LibreCaslonText";
                    font-size: 1.7rem;
                }
                .lower {
                }
                @media @desktop {
                    height: 120px;
                    padding-top: 40px;
                    .upper {
                        font-size: 2.3rem;
                    }
                }
            }
        }
    }
</style>
