/* Fix for WP Rocket content-visibility issue */
[data-wpr-lazyrender] {
    content-visibility: visible !important;
}

.image {
    background: #FFC0C0;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 750px) {
    body.custom-cursor-active {
        cursor: none;
    }
    
    .custom-cursor-element {
        --cursor-size: clamp(110px, calc(5vw + 5vh), 170px);
        position: fixed;
        width: var(--cursor-size);
        height: var(--cursor-size);
        background-image: url('/wp-content/themes/workshop/assets/icons/ws-read-more.svg');
        background-size: contain;
        background-repeat: no-repeat;
        border-radius: 50%;
        pointer-events: none;
        left: 0;
        top: 0;
        z-index: 9999;
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0.2s var(--cubic-bezier), opacity 0.2s var(--cubic-bezier), visibility 0.2s var(--cubic-bezier);
        opacity: 0;
        will-change: transform, opacity, visibility;
        display: block;
        visibility: hidden;

    }
    
    .article-card:hover ~ .custom-cursor-element,
    body.custom-cursor-active .custom-cursor-element {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        visibility: visible;
    }
}