.hero-block {
    --hero-primary-image: "";
    --hero-primary-color: #EFF9E5; /*Mint*/
    --hero-secondary-color: #E6F5CD;
    --spotlight-primary-color: #E6F5CD;
    --spotlight-secondary-color: #F6FCF0;
    --margin-width: calc((100% - var(--container-width,60.625em)) / 2);
    --hero-primary-desktop-position: right calc(var(--margin-width) + 220px) top 50px;
    --hero-primary-desktop-size: auto;
    --hero-primary-tablet-position: right calc(var(--margin-width) + 220px) top 50px;
    --hero-primary-tablet-size: auto;
}

/* Hero background with stacked gradients */
.hero-block {
    position: relative;
    min-height: 486px;
    background: linear-gradient(136deg, var(--hero-primary-color) 0%, var(--hero-secondary-color) 100%) !important;
    background-repeat: no-repeat;
}

@media (min-width: 768px) {
    .hero-block {
        background-image: var(--hero-primary-image), linear-gradient(to right, var(--hero-primary-color), var(--hero-secondary-color));
        background-position: var(--hero-primary-desktop-position), center;
        background-size: var(--hero-primary-desktop-size), cover;
        background-repeat: no-repeat, no-repeat;
        padding-top: 4rem;
        min-height: 432px;
    }
}

@media (min-width: 992px) {
    .hero-block {
        min-height: 507px;
    }
}

@media (min-width: 1400px) {
    .hero-block {
        min-height: 529px;
    }
}

/* Circular highlight that goes LEFT → RIGHT inside the circle */
.hero-block .container {
    position: relative;
}

@media (min-width: 768px) {
    .hero-block .container::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        --circle-d: 600px; /*diameter*/
        --circle-x: 60%;
        --circle-y: 40%;
        background: linear-gradient(to right, var(--spotlight-primary-color) 50% 50%, var(--spotlight-secondary-color));
        mask-image: radial-gradient(circle at var(--circle-x) var(--circle-y), black 0 calc(var(--circle-d) / 2), transparent calc(calc(var(--circle-d) / 2) + 1px));
        -webkit-mask-image: radial-gradient(circle at var(--circle-x) var(--circle-y), black 0 calc(var(--circle-d) / 2), transparent calc(calc(var(--circle-d) / 2) + 1px));
        height: 275%;
        width: 100%;
        bottom: 0px;
        top: 4%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hero-block .container::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: var(--hero-primary-image);
        background-repeat: no-repeat;
        background-position-x: 68%;
        background-size: contain;
        height: 800.62px;
        width: 338px;
        left: 46%;
        top: 0%;
    }

    .hero-block.no-primary-image-tablet .container::after {
        background-image: unset;
    }
}

@media (min-width: 992px) {
    .hero-block .container::before {
        --circle-d: 615px; /*diameter*/
        --circle-x: 68%;
    }

    .hero-block .container::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: var(--hero-primary-image);
        background-repeat: no-repeat;
        background-position-x: 68%;
        background-size: contain;
        height: 800.62px;
        width: 338px;
        left: 55%;
        top: 0%;
    }
}

@media (min-width: 1200px) {
    .hero-block .container::before {
        --circle-d: 627px; /*diameter*/
        --circle-x: 72%;
    }

    .hero-block .container::after {
        left: 60%;
    }
}

/* Optional: soften the composite by blending (try others like overlay/soft-light) */
.hero-block {
    overflow: unset;
}

@media (min-width: 767px) {
    .hero-block {
        overflow: hidden;
    }
}