Team Grid

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

.block-team-grid {
    @include padding-top(rem-calc(64));
    @include padding-bottom(rem-calc(64));

    .team-members {
        display: grid;
        gap: 32px 24px;
        grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    }

    .team-card {
        text-decoration: none;

        &__name {
            padding: 0.5rem;
            font-weight: 700;
        }

        &__role {
            padding: 0.5rem;
        }
    }
}

.team-modal {
    background-color: var(--primary);
    &__name {
        color: var(--secondary);
        padding: 0.5rem 1rem;
        font-weight: 700;
    }

    &__role {
        color: var(--white);
        padding: 0.5rem 1rem;
    }

    &__content {
        color: var(--white);
        padding: 0.5rem 1rem;
    }
}

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/team-grid",
    "title": "Team Grid",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-team-grid.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": false,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - People Grid",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/team-grid/block-team-grid.css", "lity-css"],
    "viewScript": ["lity-js"]
}