<script lang="ts">
    import { apiBaseURL } from "../../../config"

    export let pageId: string
    export let col: Column
</script>

<div class="iconBlock">
    {#each col.iconBlocks as icon}
        <div class="icon">
            <img src="{`${apiBaseURL}page/${pageId}/${icon.icon?.src}`}" alt="img" />
            <div class="text">
                <em>{icon.bigText}</em>
                <p>{icon.smallText}</p>
            </div>
        </div>
    {/each}
</div>

<style lang="less">
    @import "../../assets/css/main.less";
    .iconBlock {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        .icon {
            margin: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;

            width: 80px;
            gap: 8px;
            max-width: 45%;
            flex-grow: 1;
            @media @tablet {
                max-width: initial;
                flex-grow: initial;
                width: 107px;
                gap: 20px;
            }
            img {
                width: 100%;
                height: auto;
            }
            .text {
                display: flex;
                flex-direction: column;
                gap: 10px;
                em {
                    text-align: center;
                    font-size: 2.2rem;
                    font-family: "Libre Caslon Text", serif;
                }
                p {
                    text-align: center;
                    font-weight: bold;
                }
            }
        }
    }
</style>
