body.sunset {
        background: radial-gradient(circle 40vw at center, var(--yellowy), var(--bluey));
    }

    :root {
        /* ---------- CARDS ---------- */
        --origin-card-width: 70%;   /* card width */
        --origin-card-gap: 4vw;      /* vertical space between cards */

        /* ---------- CLOUD LAYOUT ---------- */
        --origin-cloud-start-y: 10vw;   /* where the first cloud row begins */
        --origin-cloud-gap-y: 20vw;     /* vertical distance between cloud rows */

        /* ---------- CLOUD SIZE ---------- */
        --origin-cloud-scale-mobile: 0.6;     /* multiplies every cloud width on mobile (850px and below) */
        --origin-cloud-scale-desktop: 0.33;   /* multiplies every cloud width on desktop (vw sizes get huge on wide screens, so this is much smaller) */
        --origin-cloud-scale: var(--origin-cloud-scale-mobile);   /* the active one, switched in the media query below */

        /* Width of each cloud image before scaling (cloud1.webp to cloud10.webp), in vw */
        --origin-cloud-1-width: 36vw;
        --origin-cloud-2-width: 59vw;
        --origin-cloud-3-width: 59vw;
        --origin-cloud-4-width: 37vw;
        --origin-cloud-5-width: 45vw;
        --origin-cloud-6-width: 35vw;
        --origin-cloud-7-width: 33vw;
        --origin-cloud-8-width: 41vw;
        --origin-cloud-9-width: 33vw;
        --origin-cloud-10-width: 44vw;


    }

    /* ---------- CLOUDS ---------- */
    /* Row position in vw (replaces the px-based spacing from global.css on this page) */
    .cloud_container .clouds {
        top: calc(var(--origin-cloud-start-y) + (var(--i, 0) * var(--origin-cloud-gap-y)));
        height: auto;
    }

    .clouds.origin-cloud-1  { width: calc(var(--origin-cloud-1-width)  * var(--origin-cloud-scale)); }
    .clouds.origin-cloud-2  { width: calc(var(--origin-cloud-2-width)  * var(--origin-cloud-scale)); }
    .clouds.origin-cloud-3  { width: calc(var(--origin-cloud-3-width)  * var(--origin-cloud-scale)); }
    .clouds.origin-cloud-4  { width: calc(var(--origin-cloud-4-width)  * var(--origin-cloud-scale)); }
    .clouds.origin-cloud-5  { width: calc(var(--origin-cloud-5-width)  * var(--origin-cloud-scale)); }
    .clouds.origin-cloud-6  { width: calc(var(--origin-cloud-6-width)  * var(--origin-cloud-scale)); }
    .clouds.origin-cloud-7  { width: calc(var(--origin-cloud-7-width)  * var(--origin-cloud-scale)); }
    .clouds.origin-cloud-8  { width: calc(var(--origin-cloud-8-width)  * var(--origin-cloud-scale)); }
    .clouds.origin-cloud-9  { width: calc(var(--origin-cloud-9-width)  * var(--origin-cloud-scale)); }
    .clouds.origin-cloud-10 { width: calc(var(--origin-cloud-10-width) * var(--origin-cloud-scale)); }

    /* ---------- CARDS ---------- */
    /* Override the two-column grid from global.css: one centered column */
    .grid-container {
        grid-template-columns: 1fr;
        justify-items: center;
        width: 100%;
        gap: 0;
        row-gap: var(--origin-card-gap);
    }

    .card-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .origin-cards {
        display: block;              /* removes the small inline-image gap that can nudge the card sideways */
        width: var(--origin-card-width);
        max-width: 70%;
        height: auto;
    }

    .desktop_card{
        display: none;
    }


    @media (min-width: 850px) {
        :root {
            --origin-cloud-scale: var(--origin-cloud-scale-desktop);
        }
        .desktop_card{
            display: block;
        }
        .footer{
        width: 20vw;
    }
        .mobile_card{
            display: none;
        }
        .origin-cards{
            width: 95vw;
        }
    }