:where(.component-image-navigation) {
    container: imageNav / inline-size;
    margin-top: var(--size-large);
    .region {
        max-width: 100dvw;
    }


    .image-nav-item {
        width: 100%;
        min-height: 55rem;
        background-size: cover;
        background-blend-mode: overlay;
        place-content: flex-end;
        place-items: center;

        .image-nav-link {
            --button-style-color: var(--color-brand-navy);
            --button-style-hover-color: var(--color-brand-navy);
            font-weight: 700;
            color: var(--color-brand-navy);
            background: var(--color-brand-pale-blue);
            padding: 1rem 2rem;
            margin: 3.5rem auto;
            &:hover {
                background: var(--color-primary-white);
            }
        }

        &:first-child {
            border-top-left-radius: 5rem;

            .image-nav-link {
                --button-style-color: var(--color-brand-poppy);
                --button-style-hover-color: var(--color-primary-white);
                font-weight: 700;
                color: var(--color-brand-poppy);;
                background: var(--color-brand-peach);
                padding: 1rem 2rem;

                &:hover {
                    background: var(--color-brand-poppy);
                    & svg path {
                        stroke: var(--color-primary-white);
                    }
                }

                & svg path {
                    stroke: var(--color-brand-poppy);
                    transition: all 250ms ease-in-out;
                }
            }

        }

        &:last-child {
            border-top-right-radius: 5rem;
            .image-nav-link {
                --button-style-color: var(--color-primary-white);
                --button-style-hover-color: var(--color-brand-teal);
                font-weight: 700;
                color: var(--color-primary-white);
                background: var(--color-brand-teal);
                padding: 1rem 2rem;

                &:hover {
                    background: var(--color-primary-white);
                    & svg path {
                        stroke: var(--color-brand-teal);
                    }
                }

                & svg path {
                    stroke: var(--color-primary-white);
                    transition: all 250ms ease-in-out;
                }
            }
        }
    }

}

@media print {
    :where(.component-image-navigation) {
        .image-navigation-wrapper {
            grid-template-columns: 1fr;
        }

        .image-nav-item {
            min-height: 0 !important;
            min-width: 0 !important;
            background-image: none !important;
            border-radius: 0 !important;
            place-content: start;
            padding: 1rem 0;
            border-bottom: 1px solid #ccc;
        }

        .image-nav-link {
            margin: 0.5rem 0 !important;
            padding: 0.5rem 1rem !important;
        }
    }
}

@media screen and (width <= 1450px) {
    :where(.component-image-navigation) {
        :where(.component-wrapper > .region > .content-wrap) {
            padding-inline: 0;
        }
    }
}

@container imageNav (width < 1024px) {
    :where(.component-image-navigation) {
        .image-nav-item {
            min-height: 35rem;
        }
    }
}

@container imageNav (width < 764px) {
    :where(.component-image-navigation) {
        .image-navigation-wrapper {
            grid-template-columns: 1fr;
        }

        .image-nav-item  {
            min-height: 30rem;
            &:first-child {
                border-top-right-radius: 5rem;
            }

            &:last-child {
                border-top-right-radius: 0;
            }
        }
    }
}