Specify exact parent child relationship between two blocks

I have built two blocks for displaying a list of feature cards.

Block 1: Feature Cards (the container element)

(function (blocks, element, blockEditor) {
    var el = element.createElement;
    var InnerBlocks = blockEditor.InnerBlocks;

    blocks.registerBlockType('feature-cards', {
        title: 'Feature Cards',
        icon: 'universal-access-alt',
        category: 'layout',
        example: {},
        edit: function (props) {
            return el('div', { className: 'feature-cards' },
                    el(InnerBlocks)
            );
        },
        save: function (props) {
            return el('div', { className: 'feature-cards' },
                    el(InnerBlocks.Content)
            );
        },
    });
})(window.wp.blocks, window.wp.element, window.wp.blockEditor);

Block 2: Feature Card (the card itself with editable content)

(function (blocks, editor, element, blockEditor) {
    var el = element.createElement;
    var RichText = editor.RichText;
    var InnerBlocks = blockEditor.InnerBlocks;

    blocks.registerBlockType('feature-card', {
        parent: ('feature-cards'),
        title: 'Feature Card',
        icon: 'universal-access-alt',
        category: 'layout',
        example: {},
        attributes: {
            content: {
                type: 'array',
                source: 'children',
                selector: 'h3',
            },
        },
        edit: function (props) {
            var content = props.attributes.content;
            function onChangeContent( newContent ) {
                props.setAttributes( { content: newContent } );
            }
            
            return el('div', { className: 'feature-card' },
                        el('div', { className: 'feature-card__icon' }, el(InnerBlocks)),
                        el( RichText, {
                            tagName: 'h3',
                            className: 'feature-card__title',
                            onChange: onChangeContent,
                            value: content,
                        } )
                );
        },
        save: function (props) {
            return el('div', { className: 'feature-card' },
                        el('div', { className: 'feature-card__icon' }, el(InnerBlocks.Content)),
                        el( RichText.Content, {
                            tagName: 'h3',
                            className: 'feature-card__title',
                            value: props.attributes.content,
                        } )
                );
        },
    });
})(window.wp.blocks, window.wp.editor, window.wp.element, window.wp.blockEditor);

As you can see I have specified that the feature-cards are the parent for the feature-card so that the card blocks can only be used inside the parent block.

However there’s a couple of issues that I’m not sure how best to resolve:

First I want to make it so that the ONLY block that can be added as a child block of the feature-cards is the child block. How can I enforce this? As the parent block displays a grid with the expectation of the cards (so basically over blocks don’t work inside here).

Second as stated above the parent block displays a grid… but when inside the editor it seems WordPress adds some wrapper elements like:

Which causes the grid to break… is there anyway around this so that it displays correctly?