.component-hero {
    padding-block: 8rem 12rem;

    &:where(.has-hero-image) {
        .region {
            max-width: unset;
        }

        &:where(.has-blue-background) {

            :where(.hero-wrapper) {
                align-items: center;
            }

            :where(.hero-image) {
                & > img {
                    transform: translate(0, 6rem);
                    max-width: 60rem;
                    height: auto;
                    border-radius: var(--border-radius-large);
                }

                & :where(.blue-background) {
                    width: 50dvw;
                    height: 100%;
                    max-height: 50rem;
                    background: var(--background-blue-gradient-l2);
                    background-size: cover;
                    position: absolute;
                    right: 0;

                }
            }
        }

        &:where(.no-blue-background) {
            :where(.hero-image) {
                min-height: var(--image-height);
                width: 50dvw;
                background-size: cover;
                background-repeat: no-repeat;
                aspect-ratio: var(--image-width) / var(--image-height);
            }
        }

        :where(.hero-wrapper) {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 4rem;
            align-items: center;


            :where(.hero-copy) {
                grid-column: 1 / -1;
                max-width: var(--content-width-large);
                margin-inline: auto;
                width: 100%;

                :where(h1, h2, h3, h4, h5, h6, p) {
                    color: var(--color-brand-corporate-blue);
                    font-weight: 400;
                }

                :where(h1, h2) {
                    font-size: 5.6rem;
                }

                & > * {
                    max-width: calc(40% - 8rem);

                    & > a {
                        word-break: break-word;
                    }
                }

                & :where(.call-to-action) {
                    margin-top: 4rem;
                    padding: 1rem 2rem;
                }
            }

            & > * {
                grid-row: 1;
            }

            :where(.hero-image) {
                grid-column: 2;
                display: grid;
                width: 100%;
                grid-template-areas: 'heroImage';

                & > * {
                    grid-area: heroImage;
                }

                & :where(.blue-background) {
                    width: 50dvw;
                    height: 100%;
                    max-height: 50rem;
                    background: var(--background-blue-gradient-l2);
                    background-size: cover;
                    position: absolute;
                    right: 0;

                }

            }
        }
    }

    &:where(.no-image) {
        text-align: center;

        :where(h1) {
            font-size: 5.6rem;
        }
    }

    &:where(.no-image.has-blue-background) {
        background: url("/wp-content/themes/inland-2025-theme/images/l3_background_crop-soft_light-gradient_wave_texture.avif") no-repeat top;
        background-size: cover;

        & :where(.hero-copy) {
            & > *:not(a) {
                color: var(--color-primary-white);
            }
        }

        :where(h1, h2, h3, h4, h5, h6, p) {
            font-weight: 400;
        }
    }
}


@media screen and (max-width: 1500px) {
    .component-hero {
        .hero-copy {
            padding-inline: 2rem;
        }

    }
}

@media screen and (max-width: 1080px) {
    .component-hero {

        &:where(.has-hero-image) {
            padding-block: 2rem 4rem;

            :where(.hero-wrapper) {
                grid-template-columns: 1fr 1fr;

                :where(.hero-copy) {
                    padding-inline: 2rem;
                    padding-top: 4rem;
                    position: relative;
                    z-index: 1;
                }


                :where(.hero-image) {
                    & > img {
                        width: 100%;
                        transform: translate(0, 2rem);
                        justify-self: center;
                    }

                    & :where(.blue-background) {
                        display: none;
                    }
                }
            }
        }

        &:where(.no-image) {
            padding-block: 2rem 4rem;
        }

        &:where(.has-blue-background) {

            &:where(.hero-image) {
                height: 100%;
            }

            .blue-background {
                position: static;
                height: 100%;
                max-height: unset;
            }
        }

    }

    .component-hero.has-blue-background.has-hero-image {

        .content-wrap {
            padding-inline: 0;
        }

        .hero-copy {
            padding-inline: 4rem 2rem;
        }

        .hero-image {
            height: 100%;
            align-items: center;

            & > img {
                transform: none;
            }
        }
    }
}


@media screen and (max-width: 680px) {
    .component-hero {
        &:where(.no-image) {
            & :where(h1) {
                font-size: 4.6rem;
            }
        }

        &:where(.has-hero-image) {
            :where(.hero-wrapper) {
                display: flex;
                flex-flow: column;
                gap: 0;

                :where(.hero-image) {
                    min-height: calc(var(--image-height) * 0.5);

                    & > img {
                        border-radius: 0;
                    }

                }

                :where(.blue-background) {
                    display: none;
                }

                :where(.hero-copy) {
                    order: 2;
                    margin-bottom: 0;
                    :where(h1, h2){
                        font-size: 4.6rem;
                    }

                    & > * {
                        max-width: 100%;
                        margin-bottom: 0;
                        margin-top: 0rem;

                    }
                }

            }
        }
    }
}