:where(.home-hero) {
    max-width: 100dvw;
    overflow: hidden;

    :where(.home-hero-wrapper) {
        display: grid;
        grid-template-columns: 46rem auto;
        gap: 2rem;
    }

    :where(.home-hero-heading) {

        & > h1 {
            color: var(--color-primary-white);
            font-weight: 400;
            font-size: 5.6rem;
        }

    }

    :where(.home-hero-text) {
        display: flex;
        flex-flow: column;
    }

    :where(.home-hero-copy) {
        color: var(--color-primary-white);

    }

    :where(.home-hero-calls-to-action) {
        display: flex;
        flex-flow: row wrap;
        margin-top: auto;
        align-self: flex-start;
        gap: 1rem;
    }

    .call-to-action-button.call-to-action-primary {
        background: var(--color-primary-white);
        color: var(--color-brand-corporate-blue);
        border: solid var(--color-primary-white) 2px;

        &:hover {
            background: transparent;
            color: var(--color-primary-white);

        }
    }

    .call-to-action-secondary {
        background: transparent;
        border: solid var(--color-primary-white) 2px;
        color: var(--color-primary-white);


        &:hover {
            background: var(--color-primary-white);
            color: var(--color-brand-corporate-blue);

        }
    }

    :where(.home-hero-carousel) {
        --carousel-slide-gap: 20;
        --carousel-left-padding: 40;
        --carousel-slide-gap-rem: 2rem;
        --carousel-left-padding-rem: 4rem;
        --slide-transform-scale: 1.15;
        overflow: hidden;
        min-width: fit-content;
        padding-block: 4rem 0;
        padding-left: var(--carousel-left-padding-rem);
    }

    :where(.home-hero-carousel-wrapper) {
        --carouselOffset: 0;
        --carouselOffsetMobile: 0;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        gap: var(--carousel-slide-gap-rem);
        position: relative;
        min-width: max-content;
        transition: all 800ms ease-in-out;
        transition-delay: 100ms;
        transform: translateX(var(--carouselOffset));
    }

    .carousel-slide {

        :is(&:hover, &.hover) {
            transform: scale(var(--slide-transform-scale));
            position: relative;
            z-index: 1;
        }

        & > img {
            border-radius: var(--border-radius-large);
        }

        :where(.carousel-slide-text) {
            border-bottom-left-radius: var(--border-radius-large);
            border-bottom-right-radius: var(--border-radius-large);
        }


    }

    .carousel-arrows {
        margin-top: 7rem;
        max-width: fit-content;

        & > button {
            border-radius: 50%;
            background: var(--color-primary-white);
            border: none;
            padding: 1rem;
            aspect-ratio: 1 / 1;
            transition: all 250ms ease-in-out;
            width: 4.4rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;

            &:nth-child(2) {
                margin-left: 1rem;
            }

            &:hover {
                background: transparent;
                border: 2px solid var(--color-primary-white);
                cursor: pointer;

                & > svg path {
                    fill: var(--color-primary-white);
                }
            }
        }
    }

    :where([ data-role="prevButton"] svg) {
        transform: rotate(180deg);
    }
}

@media screen and (max-width: 1200px) {
    :where(.home-hero) {
        .carousel-slide > img {
            max-width: 30rem;
        }
    }
}

@media screen and (max-width: 980px) {
    :where(.home-hero) {

        :where(.home-hero-carousel.mobile) {
            --carousel-left-padding-rem: 2rem;

        }

        :where(.home-hero-wrapper) {
            grid-template-columns: auto;
            gap: 3rem;

            :where(.home-hero-carousel-wrapper) {
                transition: all 400ms ease-in-out;
                transition-delay: 0ms;
            }

            :where(.home-hero-text) {
                max-width: 80dvw;
            }


            :where(.home-hero-calls-to-action) {
                margin-top: 2rem;
                display: flex;
                flex-wrap: wrap;
            }

            .carousel-arrows {
                margin-top: 3rem;
            }

            :where(.home-hero-heading) {

                & > h1 {
                    font-size: 4.6rem;
                }

            }
        }
    }
}