[id^="image-overlay-link-grid-block"] {
    min-height: 3em;
    margin: 70px 0px;
    .IOLG--wrapper {
        .IOLG--innerblocks-container {
            display: grid;
            grid-auto-flow: row;
            gap: 33px;
        }

        &.remove-gaps {
            .IOLG--innerblocks-container{
                gap: 0;
            }
        }

        &.center-items {
            .IOLG--innerblocks-container {
                justify-items: center;
                align-items: center;

                > .wp-block-group {
                    height: 100%;
                    .wp-block-group__inner-container{
                        height: 100%;
                    display: flex;
                    flex-direction: column;
    
                    > *:first-child {
                        flex-grow: 0;
                        flex-shrink: 0;
                    }
                    
                    > *:last-child, >.wp-block-group {
                        height: 100%;
                        flex-grow: 1;
                        flex-shrink: 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
                }
            }

        }

        &.constrain-width {
            max-width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }

        &.two-column-grid {
            .IOLG--innerblocks-container{
                grid-template-columns: repeat(2, 1fr);
            }

            &.constrain-width {
                .IOLG--innerblocks-container {
                    grid-template-columns: minmax(auto, 250px) minmax(auto, 250px);
                }
            }
        }

        &.three-column-grid {
            .IOLG--innerblocks-container{
                grid-template-columns: repeat(3, 1fr);
            }

            &.constrain-width {
                .IOLG--innerblocks-container {
                    grid-template-columns: minmax(auto, 250px) minmax(auto, 250px) minmax(auto, 250px);
                }
            }
        }

        &.four-column-grid {
            .IOLG--innerblocks-container{
                grid-template-columns: repeat(4, 1fr);
            }
            &.constrain-width {
                .IOLG--innerblocks-container {
                    grid-template-columns: minmax(auto, 250px) minmax(auto, 250px) minmax(auto, 250px) minmax(auto, 250px);
                }
            }
        }

        &.one-column-grid {
            .IOLG--innerblocks-container{
                grid-template-columns: 1fr;
            }
            &.constrain-width {
                .IOLG--innerblocks-container {
                    grid-template-columns: minmax(auto, 250px);
                }
            }
        }
    }

    @media (max-width: 991px) {
        .IOLG--wrapper.three-column-grid:not(.skip-2-column), .IOLG--wrapper.four-column-grid {
            .IOLG--innerblocks-container {
                grid-template-columns: repeat(2, 1fr);

            }
            &.constrain-width {
                .IOLG--innerblocks-container {
                    grid-template-columns: minmax(auto, 250px) minmax(auto, 250px);
                }
            }
        }  

        .IOLG--wrapper.three-column-grid.skip-2-column {
            .IOLG--innerblocks-container {
                grid-template-columns: 1fr;

            }
            &.constrain-width {
                .IOLG--innerblocks-container {
                    grid-template-columns: minmax(auto, 250px);
                }
            }
        }
    }

    @media (max-width: 550px) {
        .IOLG--wrapper.three-column-grid, .IOLG--wrapper.four-column-grid, .IOLG--wrapper.two-column-grid {
            .IOLG--innerblocks-container {
                grid-template-columns: 1fr !important;

            }
            &.constrain-width {
                .IOLG--innerblocks-container {
                    grid-template-columns: minmax(auto, 250px) !important;
                }
            }

        }
    }
}

/* If you have nested grid, break the parent grid earlier. */
[id^="image-overlay-link-grid-block"]:has([id^="image-overlay-link-grid-block"]) {
    @media(max-width: 991px) {
        >.IOLG--wrapper>.IOLG--innerblocks-container {
            grid-template-columns: 1fr;
        }
    }

    [id^="image-overlay-link-grid-block"] {
        margin: 0;
    }
}

/* If the grid contains info-card blocks remove the margin as these cards already have their own padding */
[id^="image-overlay-link-grid-block"]:has([id^="info-card-block"]) {
    margin: 0;
}