.masonry-grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    padding: 10px;
  }
  
  @media (min-width: 1200px) {
    .masonry-grid {
      grid-template-columns: repeat(4, 1fr);
    }
    
    .col-xl-4 {
      grid-column: span 2;
    }
    
    .col-xl-2 {
      grid-column: span 1;
    }
  }
  
  .masonry-grid-item {
    break-inside: avoid;
    margin-bottom: 20px;
  }