.component-image-callout {
    container-name: image-callout-container;
    container-type: inline-size;

    :where(& > .component-wrapper) {
        container-name: image-callout-compoment-wrapper;
        container-type: inline-size;
    }
}

/* Variable setup only */
:where(.component-image-callout) {
    --local-image-grid-width-large: minmax(35rem, 1fr);
    --local-image-grid-width-medium: minmax(30rem, 1fr);
    --local-image-grid-width-small: minmax(25rem, 1fr);
    --local-image-grid-width-responsive: minmax(min-content, 1fr);

    --local-image-grid-width: var(--local-image-grid-width-large);
    --local-content-inline-padding: var(--size-small);

    &:where(.content-max-width-medium) {
        --local-image-grid-width: var(--local-image-grid-width-medium);
    }

    &:where(.content-max-width-small) {
        --local-image-grid-width: var(--local-image-grid-width-small);
    }
}

:where(.component-image-callout) {

    :where(.content-placement-middle .region) {
        display: grid;
        justify-items: center;
    }

    :where(.component-wrapper > .region) {
        container-type: unset;
        container-name: unset;
    }

    :where(.component-wrapper > .region > .content-wrap) {
        display: grid;
        gap: var(--size-small);
        padding-inline: var(--minimum-inline-padding);

        & > * {
            grid-row: 1 / -1;
        }

        :where(.image) {
            grid-column: image;
            align-content: center;

            :where(img, picture) {
                object-fit: cover;
                object-position: center;
                height: auto;
                width: 100%;
                border-radius: var(--border-radius-common);
                max-height: fit-content;
            }
        }

        & > :where(.content) {
            grid-column: content;
            display: flex;
            flex-direction: column;
            padding: var(--local-content-inline-padding);
            align-self: center;

            & > :where(.header) {
                margin: 0;
            }

            & > :where(p) {
                margin: 0;
            }

            :where(.ctas) {
                margin-top: var(--size-medium);
                display: flex;
                flex-wrap: wrap;
                grid-template-columns: auto auto auto;
                gap: var(--size-x-small);
                justify-content: left;
                justify-items: center;

                :where(.component-button) {
                    white-space: nowrap;
                }
            }
        }
    }

    /* Styles for display-mode-left - image on left, content on right */

    &:where(.display-mode-left) {
        :where(.component-wrapper > .region > .content-wrap) {
            grid-template-columns: [image-start] var(--local-image-grid-width) [image-end content-start] 1fr [content-end];
        }
    }

    /* Styles for display-mode-right - content on left, image on right */

    &:where(.display-mode-right) {
        :where(.component-wrapper > .region > .content-wrap) {
            grid-template-columns: [content-start] 1fr [content-end image-start] var(--local-image-grid-width) [image-end];
        }
    }
}

.component-image-callout :where(.component-wrapper > .region p:last-of-type) {
    margin-block-end: 0;
}

/**
 Collapse the large down to medium. The calc is roughly the width of medium with padding
 */
@container image-callout-container (  inline-size <= calc(96rem + 2rem + 2rem )) {
    .component-image-callout {
        :where(&.content-max-width-large ) {
            :where(& > .component-wrapper) {
                --local-image-grid-width: var(--local-image-grid-width-medium);
            }
        }
    }
}

/**
 Collapse the large and medium down to small. The calc is roughly the width of medium with padding
 */
@container image-callout-container (  inline-size <= calc(72rem + 2rem + 2rem )) {
    .component-image-callout {
        :where(&.content-max-width-large, &.content-max-width-medium ) {
            :where(& > .component-wrapper) {
                --local-image-grid-width: var(--local-image-grid-width-responsive);

                :where(& > .region > .content-wrap) {
                    & > :where(*) {
                        align-content: start;
                        padding-block-start: var(--local-content-inline-padding);
                    }
                }
            }
        }
    }
}

@container image-callout-compoment-wrapper (style(--local-image-grid-width: var(--local-image-grid-width-medium)) or style(--local-image-grid-width: var(--local-image-grid-width-small))) {
    .component-image-callout {
        :where(.component-wrapper > .region > .content-wrap) {
            & > :where(.image) {
                align-content: start;
            }

            & > :where(.content) {
                padding-top: 0;
                align-self: start;
            }

        }
    }
}

@container image-callout-container (  inline-size <= 60rem ) {
    .component-image-callout {
        :where(.component-wrapper > .region > .content-wrap) {
            grid-template-columns: 1fr;
            grid-template-rows: [image-start] auto [image-end content-start] auto [content-end];
            gap: 0;

            & > :where(.image) {
                grid-row: image;
            }

            & > :where(.content) {
                grid-row: content;
                padding-top: var(--size-medium);

                :where(.ctas) {
                    :where(.call-to-action) {
                        text-wrap: auto;
                    }
                }
            }
        }

    }
}