/* --- Header Media
-------------------------------------------------------- */

.wp-block-header-media {
    overflow: hidden;

    .alignwide>* {
        max-width: 1000px;
        margin-inline: auto;
    }

    .wp-block-star-ratings {
        line-height: 1;
    }

    .wp-block-cover__image-background {
        position: relative;
    }

    .wp-block-cover__inner-container {
        position: absolute;
        left: 50%;
        top: 15%;
        transform: translateX(-50%);
    }

    .wp-hero-image-wrapper {
        position: relative;
        margin-top: 42px;
        // background: url(assets/images/hero-image.png) no-repeat;
        background-size: 125%;
        background-position: center bottom;



        &::before {
            content: '';
            background: url(assets/images/right-splash.svg);
            width: 60vw !important;
            height: 60vw;
            background-size: 100%;
            position: absolute;
            top: -35%;
            left: -15%;
            background-repeat: no-repeat;
            filter: drop-shadow(0 1000px 0 var(--wp--preset--color--shape-bg));
            transform: translateY(-1000px);

        }

        .wp-centered-hero-image {
            width: 64vw !important;
            height: 32vw;
            border-top-left-radius: 32vw;
            border-top-right-radius: 32vw;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            margin: 0 auto !important;
            padding: 0;
            overflow: hidden;
            max-width: 100%;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;

            }

        }

        .wp-circle-float-image {
            position: absolute;
            width: 13vw !important;
            height: 13vw;
            background-color: var(--wp--preset--color--icon-bg);
            border-radius: 50%;
            overflow: hidden;
            padding: 0;
            margin: 0 !important;
            z-index: 1;

            figure {
                margin: 0 !important;
                width: 100%;
                height: 100%;

                &>* {
                    margin: 0 !important;
                    width: 100%;
                    height: 100%;
                }
            }

            &.image-first {
                top: 0vw;
                left: -1vw;


            }

            &.image-second {
                top: -4vw;
                right: 6vw;
            }

            &.image-third {
                top: auto;
                right: -4vw;
                bottom: 4vw;
            }


            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }



}

@media (min-width: 600px) {
    .wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image.image-second {
        top: -5vw;
        right: 7vw;
    }

    .wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image.image-third {
        right: -3vw;
        bottom: 4vw;
    }

    .wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image.image-first {
        top: -1vw;
        left: 0vw;
    }
}

@media (min-width: 768px) {


    .wp-block-header-media .wp-hero-image-wrapper {
        margin-top: 56px;
    }

    .wp-block-header-media .wp-hero-image-wrapper::before {
        width: 40vw !important;
        height: 40vw;
    }

}

@media (min-width: 1366px) {

    .wp-block-header-media .wp-hero-image-wrapper {
        margin-top: 70px;
    }

}

@media (min-width: 1600px) {


    .wp-block-header-media .wp-hero-image-wrapper .wp-centered-hero-image {
        width: 918px !important;
        height: 459px;
        border-top-left-radius: 459px;
        border-top-right-radius: 459px;
    }

    .wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image.image-first {
        top: 0vw;
        left: -1vw;
    }

    .wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image.image-second {
        top: -4vw;
        right: 5.5vw;
    }

    .wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image.image-third {
        right: -3vw;
        bottom: 4vw;
    }

    .wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image {
        width: 195px !important;
        height: 195px;
    }
}

/** header with masked iage **/
.wp-block-header-media.self-created-masked-image {

    .wp-hero-image-wrapper {
        .wp-centered-hero-image {
            border-radius: 0;
            overflow: initial;

            .wp-block-image {
                height: 100%;
                display: flex;
                align-items: flex-end;
                justify-content: center;

                img {
                    width: auto;
                    height: auto;
                    max-height: 100%;
                    object-fit: contain;
                    margin: 0 auto;
                    align-self: flex-end;
                }
            }

        }
    }
}

.wp-block-header-media.self-created-masked-image .wp-hero-image-wrapper .wp-centered-hero-image .wp-block-image>div {
    height: 100%;
}