/**
 * Minibanners 1:1 — escritorio 2×2 centrado (−20% tamaño), sombra como .neumatico-card; móvil 2×2 compacto.
 */

.minibanners-neumaticos {
    width: 100%;
    padding: 0.75rem 0 1.25rem;
}

.minibanners-neumaticos__inner {
    width: min(100%, 1200px);
    margin-inline: auto;
    padding-inline: clamp(0.75rem, 2.5vw, 1.5rem);
    --mb-gap: clamp(0.5rem, 1.2vw, 1rem);
}

.minibanners-neumaticos__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mb-gap);
    align-items: stretch;
    width: 100%;
}

@media (min-width: 769px) {
    .minibanners-neumaticos,
    .minibanners-neumaticos__inner,
    .minibanners-neumaticos__grid {
        overflow: visible;
    }

    .minibanners-neumaticos {
        /* Espacio para que la sombra no la recorte #neumaticos-cuerpo-blanco { overflow:hidden } */
        padding: 0.75rem clamp(0.75rem, 2.5vw, 1.5rem) 1.5rem;
    }

    .minibanners-neumaticos__grid {
        width: 80%;
        max-width: 100%;
        margin-inline: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(0.75rem, 1.5vw, 1.25rem);
        padding: 0.35rem;
    }

    .minibanners-neumaticos__item {
        overflow: visible;
    }

    /*
     * Igual que .neumatico-card (neumaticos/index.php).
     * Sombra en __frame con overflow:visible; la imagen se redondea en __img.
     */
    .minibanners-neumaticos__frame {
        border-radius: 12px;
        overflow: visible;
        background: #ffffff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .minibanners-neumaticos__item:hover .minibanners-neumaticos__frame,
    .minibanners-neumaticos__link:hover .minibanners-neumaticos__frame,
    .minibanners-neumaticos__link:focus-visible .minibanners-neumaticos__frame {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }

    .minibanners-neumaticos__img {
        border-radius: 12px;
    }
}

.minibanners-neumaticos__item {
    min-width: 0;
}

.minibanners-neumaticos__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.minibanners-neumaticos__link:focus-visible {
    outline: 2px solid #113885;
    outline-offset: 3px;
    border-radius: 12px;
}

.minibanners-neumaticos__frame {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0.375rem;
    background: #f4f6fb;
}

.minibanners-neumaticos__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.minibanners-neumaticos--bajo-resultados {
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

@media (max-width: 768px) {
    .minibanners-neumaticos {
        padding: 0.5rem 0 1rem;
    }

    .minibanners-neumaticos__inner {
        padding-inline: 0.625rem;
    }

    .minibanners-neumaticos__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        width: 100%;
    }

    .minibanners-neumaticos__frame {
        border-radius: 0.25rem;
    }
}