@media (max-width: 1024px) {
    .product-hero-grid {
        gap: 24px;
    }
    .shade-grid {
        gap: 4px; /* Tighter spacing to fit the smaller screen */
    }

    .trust-inner {
        justify-content: center; /* Centers the wrapped items instead of scattering them */
        gap: 24px 40px; /* Adds vertical gap when they wrap */
    }

        .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}