/* One shared canvas; themed ornaments crossfade across section boundaries. */
@media (min-width: 768px) {
    .home-page {
        background: #f4f6f1;
    }

    .home-page .home-about-section,
    .home-page .home-jdih-section {
        --home-illustration: url('/images/home-urban-farming.webp');
    }

    .home-page .home-quick-section,
    .home-page .home-links-section {
        --home-illustration: url('/images/home-layanan-hewan-perikanan.webp');
    }

    .home-page .home-info-section,
    .home-page .home-surveillance-section {
        --home-illustration: url('/images/home-pengawasan-pangan.webp');
    }

    .home-page > .home-section:not(.home-about-section):not(.home-quick-section),
    .home-page .home-highlight-section {
        --home-illustration: url('/images/home-tanam-serentak.webp');
    }

    .home-page .home-about-section,
    .home-page .home-quick-section,
    .home-page .home-jdih-section,
    .home-page .home-info-section,
    .home-page > .home-section:not(.home-about-section):not(.home-quick-section),
    .home-page .home-surveillance-section,
    .home-page .home-highlight-section,
    .home-page .home-links-section {
        position: relative;
        isolation: isolate;
        overflow: visible;
        background: transparent;
    }

    .home-page .home-quick-section {
        border-top: 0;
    }

    .home-page .home-about-section::before,
    .home-page .home-quick-section::before,
    .home-page .home-jdih-section::before,
    .home-page .home-info-section::before,
    .home-page > .home-section:not(.home-about-section):not(.home-quick-section)::before,
    .home-page .home-surveillance-section::before,
    .home-page .home-highlight-section::before,
    .home-page .home-links-section::before {
        content: "";
        display: block;
        position: absolute;
        inset: -12% 0;
        z-index: 0;
        pointer-events: none;
        background: var(--home-illustration) center center / cover no-repeat;
        opacity: .16;
        mix-blend-mode: multiply;
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    }

    .home-page .home-about-section::before {
        top: 0;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent);
        mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent);
    }

    .home-page .home-jdih-section::before,
    .home-page .home-info-section::before,
    .home-page .home-surveillance-section::before,
    .home-page .home-highlight-section::before,
    .home-page .home-links-section::before {
        opacity: .11;
    }

    .home-page .home-about-section > .container,
    .home-page .home-quick-section > .container,
    .home-page .home-jdih-section > .container,
    .home-page .home-info-section > .container,
    .home-page > .home-section:not(.home-about-section):not(.home-quick-section) > .container,
    .home-page .home-surveillance-section > .container,
    .home-page .home-highlight-section > .container,
    .home-page .home-links-section > .container {
        position: relative;
        z-index: 1;
    }
}