/* Base styles for the grid container */
.sito-annunci-grid-filter {
    display: grid;
    gap: 7px; /* Maintains the existing gap */
    width: 100%; /* Ensures the grid takes full width */
    align-items: center; /* Keeps elements vertically aligned */
    /* The existing classes 'grid-cols-2 grid-cols-3' might provide
       some mobile responsiveness. The following media query provides
       a more explicit mobile layout if needed. */
  }
  
  /* Mobile Layout: First three divs on a separate row (or wrapping) */
  /* This media query targets screens up to 767px wide. Adjust the breakpoint
     (768px) in the next media query to match your 'lg:' breakpoint if needed. */
  @media (max-width: 767px) {
     .sito-annunci-grid-filter {
        /* Arrange items in columns that fit, stacking if needed */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjust minmax(150px) based on your item's minimum width */
        grid-auto-flow: row; /* Ensure elements flow into rows */
     }
  
     /* Reset any explicit grid placement for mobile */
     .sito-annunci-grid-filter > .form-group:nth-child(1),
     .sito-annunci-grid-filter > .form-group:nth-child(2),
     .sito-annunci-grid-filter > .form-group:nth-child(3),
     #prezzodropdown,
     #superficiedropdown {
         grid-column: auto !important; /* Use !important to override potential utility classes */
         grid-row: auto !important;
         width: auto !important; /* Reset width set for larger screens */
         height: auto !important; /* Reset height set for larger screens */
     }
  }
  
  /* Larger Screens Layout: #prezzodropdown and #superficiedropdown on the same row, filling it */
  /* This media query targets screens 768px and wider (similar to a typical 'lg:' breakpoint) */
  @media (min-width: 768px) {
    .sito-annunci-grid-filter {
      width: auto; /* Allow the grid to shrink if content is less than 100% wide */
      /* Define a grid with 6 columns. This allows the first three elements
         to span 2 columns each in the first row, and the last two
         to span 3 columns each in the second row, creating equal width. */
      grid-template-columns: repeat(6, 1fr);
      grid-auto-flow: row; /* Ensure elements flow into rows */
    }
  
    /* Place the first three .form-group elements in the first row, making each span 2 columns */
    /* This relies on the specific order of these elements in the HTML. */
    .sito-annunci-grid-filter > .form-group:nth-child(1) {
      grid-column: span 2;
      grid-row: 1; /* Explicitly place in the first row */
    }
    .sito-annunci-grid-filter > .form-group:nth-child(2) {
      grid-column: span 2;
      grid-row: 1;
    }
    .sito-annunci-grid-filter > .form-group:nth-child(3) {
      grid-column: span 2;
      grid-row: 1;
    }
  
    /* Place #prezzodropdown and #superficiedropdown in the second row, making each span 3 columns */
    #prezzodropdown {
      grid-column: span 3; /* Span 3 columns */
      grid-row: 2; /* Place in the second row */
      width: 100%; /* Make the element fill its allocated grid area */
      box-sizing: border-box; /* Include padding and border in the element's total size */
    }
  
    #superficiedropdown {
      grid-column: span 3; /* Span 3 columns */
      grid-row: 2; /* Place in the second row */
      width: 100%; /* Make the element fill its allocated grid area */
      box-sizing: border-box;
    }
  }