IdsLayoutGrid: cols-{size} is not working when resizing parent container when enable-container is enabled

[fabiojpoli]

Describe the bug cols-{size} is not working when resizing parent container when enable-container is enabled for grid layout to apply breakpoints based on preview container instead of the browser window size.

To Reproduce

<ids-modal id="modal-1" title="Form" fullsize="">
  <ids-layout-grid cols="4" cols-xl="3" cols-sm="2" cols-xs="1" enable-container>
    <ids-layout-grid-cell height="200px" fill></ids-layout-grid-cell>
    <ids-layout-grid-cell height="200px" fill></ids-layout-grid-cell>
    <ids-layout-grid-cell height="200px" fill></ids-layout-grid-cell>
    <ids-layout-grid-cell height="200px" fill></ids-layout-grid-cell>
    <ids-layout-grid-cell height="200px" fill></ids-layout-grid-cell>
    <ids-layout-grid-cell height="200px" fill></ids-layout-grid-cell>
    <ids-layout-grid-cell height="200px" fill></ids-layout-grid-cell>
    <ids-layout-grid-cell height="200px" fill></ids-layout-grid-cell>
  </ids-layout-grid>
</ids-modal>

• The cols-sm is set to 2:

Meaning if I change container the width 601px, must show two columns instead of three, right? But still has three columns:

After that ,if I resize the browser window works, but I need to work in the container resize (when I set the enabled container attribute):

Expected behavior When resizing the modal (not the browser window), change the grid layout from 3 columns to two columns.

Version 1.4.2

Additional context We have the designer to build the form, and then we want the user to have a preview how that form will looks like for phone, tablet, small screen, etc (how many columns the layout will show depending on the screen size). When changing the dropdown value which has Large, I want to resize the modal to user see how the form will looks like: