/* ==========================================================================
   SNIPPET 3: CHILD PAGE HERO
   ========================================================================== */

.blob-image-right {
    position: relative;
    min-height: 350px;
    max-height: 60vh;
    width: 100%;

    /* Flip horizontally */
    transform: scaleX(-1);

    /* SVG Blob Mask */
    -webkit-mask-image: var(--bubble);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: bottom right;
    -webkit-mask-size: 150% 130%;
    mask-image: var(--bubble);
    mask-repeat: no-repeat;
    mask-position: bottom right;
    mask-size: 150% 130%;
}

.blob-image-right::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.25) 10%,
        rgba(0, 0, 0, 0.5) 65%
    );
}

/* -- Desktop (980px+) -- */
@media (min-width: 980px) {
    .blob-image-right {
        -webkit-mask-position: bottom right;
        -webkit-mask-size: 110% 150%;
        mask-position: bottom right;
        mask-size: 110% 150%;
    }
    .blob-image-right::after {
        background: linear-gradient(
            0,
            rgba(0, 0, 0, 0.17) 50%,
            rgba(0, 0, 0, 0.35) 85%
        );
    }
}

/* -- Wider Desktop (1200px+) -- */
@media (min-width: 1200px) {
    .blob-image-right {
        -webkit-mask-size: 107% 150%;
        mask-size: 107% 150%;
    }
}

/* -- Extra-Wide Desktop (1720px+) -- */
@media (min-width: 1720px) {
    .blob-image-right {
        width: 880px; 
        -webkit-mask-size: 100% 150%;
        mask-size: 100% 150%;
    }
}

/* -- Tablet Portrait (up to 1024px) -- */
@media (max-width: 1024px) {
    .blob-image-right {
        -webkit-mask-size: 100% 130%;
        mask-size: 100% 130%;
    }
}

/* -- Mobile Landscape (up to 880px) -- */
@media (max-width: 880px) {
    .blob-image-right {
        -webkit-mask-size: 100% 140%;
        mask-size: 100% 140%;
    }
}

/* -- Mobile Portrait (up to 767px) -- */
@media (max-width: 767px) {
    .blob-image-right {
        min-height: 350px;
        max-height: 75vh;
        -webkit-mask-size: 100% 150%;
        mask-size: 100% 150%;
    }
}