Tools Grid

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-tools-grid{
    .container-wide{
        max-width: rem-calc(1600);
        @include bp($md, true) {
            padding: 0;
        }
    }

    &__griditems{
        display: grid;
        gap: rem-calc(10);
        grid-template-columns: 1fr; 

        @include bp($md) {
            grid-template-columns: 1fr 1fr;
        }
    }

    .tools-grid-card{
        background: linear-gradient(180deg, #E0E5E9 22.61%, #FFFFFF 89.57%);
        border: 1px solid rgba(0,0,0,0.3);
        border-radius: 20px;
        overflow: hidden;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        justify-content: space-between;        
        @include padding(rem-calc(20 8.61 9.58 8.61));

        @include bp($lg){
            @include padding(rem-calc(45 8.61 9.58 8.61));
        }

        &__image {
            @include margin-bottom(rem-calc(25));
            position: relative;
            width: 100%;
            flex: 1;
            @include bp($md){
                aspect-ratio: 298/292;
                max-width: 298px;
                margin-left: auto;
                margin-right: auto;
            }

            picture {
                margin: 0 auto;
                width: auto;
                max-width: 125px;
                @include bp($md){
                    max-width: 298px;
                }
            }

            img {
                width: auto;
                max-width: 100%;
                height: auto;
                display: block;
                margin: 0 auto;
            }
        }

        &__info{
            @include padding(rem-calc(22 28));
            background-color: $white;
            border: 1px solid rgba(0,0,0,0.2);
            border-radius: 13px;
            max-width: 405px;
            text-decoration: none;
            transition: 0.3s background-color ease-in;

            &_footer{
                @include bp($md,true){
                    display: flex;
                    justify-content: space-between;
                    gap: 10px;
                }
            }

            &_title{
                font-size: clamp(rem-calc(34), 2.5vw, rem-calc(40));
                margin-bottom: 0;
                line-height: 1.2;
            }

            &_lede{
                font-size: clamp(rem-calc(16), 2vw, rem-calc(26));
                line-height: 1;
                letter-spacing: -4%;
                text-decoration: none;
            }

            svg{
                @include margin-top(rem-calc(10));
                @include bp($md,true){
                    margin-top: 0;
                }
            }
        }

        &:hover{
            .tools-grid-card__info{
                background-color: $black;
                color: $white;

                &_title{
                    color: $white;
                }
            }
        }
    }
}

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/tools-grid",
    "title": "Tools Grid",
    "description": "Tools Grid block",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-tools-grid.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "style": "file:../../assets/css/tools-grid/block-tools-grid.css"
}