@media (min-width: 841px) {
    .zoomer {
        position: relative;
        margin: 10px auto;
        display: block; /* Ensure consistent block-level display */
        overflow: visible; /* Allow magnifier to overflow and be visible */
        padding: 20px; /* Add padding to allow magnifier to move around edges */
        box-sizing: border-box; /* Ensure padding doesn't increase total width */
    }

    .zoomer img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto; /* Center the image within the padded container */
        padding: 0;
        pointer-events: none; /* Prevent image from capturing events */
    }

    .zoomer:hover {
        cursor: none;
    }

    .zoomer:hover .lens {
        opacity: 1;
    }

    .lens {
        width: 300px;
        height: 300px;
        box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
        pointer-events: none;
        position: absolute;
        opacity: 0;
        border: 4px solid whitesmoke;
        z-index: 99;
        border-radius: 100%;
        background-size: 200%; /* Adjust for desired zoom level */
		background-position:center;
        background-repeat: no-repeat; /* Ensure no tiling */
        transition: opacity 0.5s ease; /* Smooth transition */
        will-change: transform; /* Improve performance for position updates */
    }
}

@media (max-width: 840px) {
    .zoomer {
		width:100% !important;
    }
    .lens {
        display: none; /* Hide magnifier on smaller screens */
    }
}