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

<div class="cards">
    {#each col.nestedCard as card}
        <div class="card">
            <div class="title">{card.title}</div>
            <div class="description">{@html card.description}</div>
        </div>
    {/each}
</div>

<style lang="less">
    @import "../../assets/css/main.less";
    .cards {
        display: flex;
        flex-direction: column;
        width: 100%;
        flex-wrap: wrap;

        gap: 40px;
        @media @desktop {
            gap: 50px;
            flex-direction: row;
            .card {
                min-width: 35%;
                max-width: 50%;
                margin-bottom: 50px !important;
                padding: 64px 0px 0px 80px !important;
                .title {
                    padding: 13px 20px !important;
                }
                .description {
                    padding: 10px 20px !important;
                }
            }
        }
        .card {
            overflow: hidden;
            flex: 1;
            margin-bottom: 40px;
            position: relative;
            padding: 54px 0px 0px 70px;

            .title {
                position: absolute;
                left: 0px;
                padding: 7px 10px;
                color: @font-color-secondary;
                font-family: "Libre Caslon Text", sans-serif;
                font-size: 1.15rem;
                top: 0px;
                height: 100px;
                width: 365px;
                z-index: 9;
                background-color: @signal-color;
            }
            .description {
                position: relative;
                z-index: 10;
                padding: 5px 10px;
                background-color: @bg-color;
            }
        }
    }
</style>
