:root {
    --gsap-svg-bg-color: #ffff00;
    --gsap-svg-bg-content-z: 1;
}

.gsap-svg-bg-shell {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--gsap-svg-bg-color);
}

.gsap-svg-bg-shell > :not(.gsap-svg-bg-art) {
    position: relative;
    z-index: var(--gsap-svg-bg-content-z);
}

.gsap-svg-bg-art {
    position: absolute;
    z-index: 0;
    width: min(66vw, 980px);
    aspect-ratio: 469 / 507;
    opacity: 0;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.gsap-svg-bg-art svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.gsap-svg-bg-art--primary {
    inset: -15vh -14vw auto auto;
}

.gsap-svg-bg-art--secondary {
    inset: auto -17vw -30vh auto;
}

.gsap-svg-bg-art--subtle {
    position: fixed;
    right: -260px;
    bottom: -360px;
    width: min(92vw, 1040px);
}

@media (max-width: 720px) {
    .gsap-svg-bg-art--primary {
        inset: -140px -240px auto auto;
        width: 560px;
    }

    .gsap-svg-bg-art--secondary {
        inset: auto -260px -240px auto;
        width: 600px;
    }

    .gsap-svg-bg-art--subtle {
        right: -250px;
        bottom: -250px;
        width: 720px;
    }
}