@media (hover: none) {
    .hero {
        z-index: 5;
        clip-path: var(--clip-path-value, inset(0% 0% 0% 0%)); /* Use the CSS variable */
        will-change: clip-path; /* Optimize for animation */
    }

    .column.background-image::before,
    .column.background-image2::before,
    .column.background-image3::before,
    .column.background-image4::before {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vh;
        content: '';
        clip-path: var(--clip-path-value, inset(0% 0% 0% 0%)); /* Use the CSS variable */
        background-image: inherit;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: #000;
        background-position: 0;
        will-change: clip-path; /* Optimize for animation */
    }

    .column.background-image::before {
        z-index: 4;
    }

    .column.background-image2::before {
        z-index: 3;
    }

    .column.background-image3::before {
        z-index: 2;
    }

    .column.background-image4::before {
        z-index: 1;
    }

    .column.background-image::before {
        background-position: 185% 0;
    }

    .column.background-image4::before {
        background-position: 85% 0;
    }

    .cta-wrapper {
        z-index: 100;
    }

    .footer-wrapper {
        z-index: 100;
    }
}