<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 {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 150px;
            gap: 10px;
            max-width: 45%;
            flex-grow: 1;
            font-size: 0.9rem;
            margin: 20px 0px;
            @media @tablet {
                max-width: initial;
                flex-grow: initial;
                width: 160px;
            }
            @media @desktop {
                width: 213px;
            }
            img {
                width: 75%;
                height: auto;
            }
            .text {
                display: flex;
                flex-direction: column;

                em {
                    text-align: center;
                    font-size: 2.2rem;
                    font-family: "Libre Caslon Text", serif;
                    font-style: normal;
                }
                p {
                    text-align: center;
                    font-weight: bold;
                    font-size: 1rem;
                }
            }
        }
    }
</style>
