@media only screen and (min-width: 320px) {
    .gb-query-loop-item {
        padding-bottom: 40px;
    }

    .gb-query-loop-item figure img {
        padding-bottom: 10px;
    }

    .gb-query-loop-item h3 {
        margin: 10px 0;
    }

    .gb-query-loop-item p {
        margin-bottom: 5px;
    }
    .gb-query-loop-item .gb-block-image{
        position: relative;
    }
    .gb-query-loop-item .gb-block-image img {
        object-fit: cover;
        height: 300px;
        width: 100%;
    }
     /* ---- Hover indicator: "go to product" diagonal arrow in a circle ------
       ::before draws the light circle, ::after masks the arrow on top.
       Both fade/slide in on hover; clicks pass through to the product link. */
    .gb-query-loop-item .gb-block-image::before,
    .gb-query-loop-item .gb-block-image::after {
        content: "";
        position: absolute;
        top: var(--card-icon-offset);
        right: var(--card-icon-offset);
        width: var(--card-icon-size);
        height: var(--card-icon-size);
        opacity: 0;
        transform: translateY(6px) scale(0.9);
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: none;
    }
    .gb-query-loop-item .gb-block-image::before {
        z-index: 2;
        border-radius: 50%;
        background-color: var(--card-icon-bg);
    }
    .gb-query-loop-item .gb-block-image::after {
        z-index: 3;
        background-color: var(--card-icon-color);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M17 7H8M17 7V16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 45% no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M17 7H8M17 7V16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 45% no-repeat;
    }
    .gb-query-loop-item .gb-block-image:hover::before,
    .gb-query-loop-item .gb-block-image:hover::after {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    @media (prefers-reduced-motion: reduce) {
        .gb-query-loop-item .gb-block-image a img,
        .gb-query-loop-item .gb-block-image::before,
        .gb-query-loop-item .gb-block-image::after {
            transition: opacity 0.3s ease;
            transform: none;
        }
    }
}
@media only screen and (min-width: 540px) {
}


@media only screen and (min-width: 768px) {
    
}


@media only screen and (min-width: 990px) {
    
}


@media only screen and (min-width: 1280px) {
    
}