body.home-responsive-body {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    height: auto;
    padding: 0;
}

.home-hero-section {
    --hero-safe-top: max(10rem, calc(120px + 2.25rem));
    --hero-safe-bottom: clamp(3.5rem, 9vh, 6.5rem);
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    padding-top: var(--hero-safe-top);
    padding-bottom: var(--hero-safe-bottom);
    align-items: center;
    background:
        linear-gradient(90deg, rgba(255, 251, 246, 0.94) 0%, rgba(255, 251, 246, 0.74) 42%, rgba(255, 251, 246, 0.14) 100%),
        linear-gradient(180deg, rgba(255, 251, 246, 0.12) 0%, rgba(241, 231, 221, 0.34) 100%),
        url("hero-yoga-sunrise.webp") center right / cover no-repeat;
}

.home-hero-section .hero-layout {
    width: min(82vw, 60rem);
    max-width: 100%;
    min-height: calc(100svh - var(--hero-safe-top) - var(--hero-safe-bottom));
    display: flex;
    align-items: center;
}

.home-hero-section .hero-copy {
    height: auto;
    min-height: 100%;
    justify-content: center;
    padding-top: 0;
}

@supports not (height: 100svh) {
    .home-hero-section .hero-layout {
        min-height: calc(100vh - var(--hero-safe-top) - var(--hero-safe-bottom));
    }

    .home-hero-section .hero-copy {
        min-height: 100%;
    }
}

/* .home-hero-section {
    background-color: lightblue;
} */

/* .home-hero-section .hero-copy {
    min-height: 640px;
} */

.mobile-home-view {
    display: none;
}

@media (max-width: 600px) {
    body.home-responsive-body {
        width: 100vw;
        /* min-height: 100vh; */
        padding: 0 2vw;
        color: var(--mobile-text);
        font-family: "Manrope", sans-serif;
        background:
            radial-gradient(circle at 8% 10%, rgba(175, 128, 88, 0.22), transparent 24%),
            radial-gradient(circle at 92% 2%, rgba(255, 255, 255, 0.95), transparent 28%),
            radial-gradient(circle at 50% 45%, rgba(231, 214, 197, 0.7), transparent 45%),
            linear-gradient(180deg, var(--mobile-bg) 0%, #f1e7dd 48%, #f8f2ec 100%);
    }

    body.home-responsive-body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)),
            repeating-linear-gradient(
                135deg,
                transparent 0,
                transparent 52px,
                rgba(130, 90, 57, 0.03) 53px,
                transparent 54px
            );
        opacity: 0.9;

        width: 100%;
        margin: 0;
    }

    .desktop-home-view {
        display: none;
    }

    .mobile-home-view {
        display: block;
        position: relative;
        z-index: 1;
    }
}

@media (min-width: 601px) {
    .desktop-home-view {
        display: block;
    }

    .mobile-home-view {
        display: none;
    }
}

@media (max-height: 820px) and (min-width: 601px) {
    .home-hero-section {
        --hero-safe-top: max(9rem, calc(120px + 1.5rem));
        --hero-safe-bottom: clamp(2.5rem, 6vh, 4rem);
    }
}