/* Mobile refinement for square-links */
@media (max-width: 767px) {
    /* Adjust the slide width to be much smaller */
    .square-links .swiper-slide, 
    .square-links .s-block-categories__item {
        width: 160px !important;
        max-width: 160px !important;
        min-width: 160px !important;
    }

    /* Force a strict 1:1 square ratio for the images */
    .square-links img {
        width: 160px !important;
        height: 160px !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important; /* Ensures the image fills the 1:1 box without stretching */
        border-radius: 8px; /* Optional: slightly tighter corner for a smaller size */
    }
}

@media (max-width: 767px) {
    .square-links {
        /* Reduce the negative value to push the squares down.
           Example: if it was -60px, changing it to -20px makes it cover less banner. */
        margin-top: -40px !important; 
        
        /* Ensures the squares stay on top of the banner visually */
        position: relative;
        z-index: 10;
    }
}

/* Desktop: Adjust overlap only (sizes remain default) */
@media (min-width: 768px) {
    .square-links {
        /* Change this value to control the overlap depth */
        /* Closer to 0px = less overlap / lower position */
        margin-top: -100px !important; 
        
        /* Ensures the section stays layered correctly over the banner */
        position: relative;
        z-index: 10;
    }

  }
    
    /* Ensure desktop images also don't crop while maintaining their default size */
    .square-links img {
      object-fit: contain !important;
        aspect-ratio: 1 / 1 !important;
    }
}