.WW-asymmetric-grid {

  /* max-height: 400px; */
  display: grid;
  /* Create a 4-column base grid */
    grid-template-columns: repeat(12, 1fr);
  /* grid-template-rows: repeat(3, 1fr); */
  /* Give rows a fixed height so spanning looks consistent */
  grid-auto-rows: 200px;
  /* gap: 16px; */
  /* Magic property: tells smaller images to pack tightly into empty holes */
  grid-auto-flow: dense; 
  
  /* grid-template-rows: 1; */
}

.WW-asymmetric-grid img {
    display: block; /* 2. ADD THIS to prevent inline baseline alignment gaps */
  width: 100%;
  height: 100%;
  /* Ensures images fill their custom slot perfectly without stretching */
  object-fit: cover; 
  /* border-radius: 8px; */
}




.WW-asymmetric-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* Changed from 3 tracks of 200px to 6 tracks of 100px */
  grid-template-rows: repeat(6, 100px); 
  /* gap: 16px; */
}

.WW-asymmetric-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

/* Explicit Item Mapping coordinates (Spans are doubled) */
.img-1 {
  grid-column: 1;
  grid-row: 1 / span 6; /* Full height (6 half-rows) */
  object-position: 80% 50%; /* x-axis percentage, y-axis pixel offset */

}

.img-2 {
  grid-column: 2 / span 2; 
  grid-row: 1 / span 3;   /* 2 full rows = 4 half-rows */
}

.img-3 {
  grid-column: 2 / span 2; 
  grid-row: 4 / span 3;   /* 1 full row = 2 half-rows */
}

.img-4 {
  grid-column: 4 / span 2; 
  grid-row: 1 / span 4;   /* 1 full row = 2 half-rows */
}

.img-5 {
  grid-column: 4;          
  grid-row: 5/ span 2;   /* 2 full rows = 4 half-rows */
}

.img-6 {
  grid-column: 5;          
  grid-row: 5 / span 2;   /* 2 full rows = 4 half-rows */
}

.img-7 {
  grid-column: 6;
  grid-row: 1 / span 6; /* Full height (6 half-rows) */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .WW-asymmetric-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .WW-asymmetric-grid img {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 250px;
  }

  .WW-asymmetric-grid
  {
    gap:0px !important;
  }

  /* Explicit Item Mapping coordinates (Spans are doubled) */
.img-1 {
  grid-column: 1;
  grid-row: 1 / span 1; /* Full height (6 half-rows) */
  object-position: 80% 50%; /* x-axis percentage, y-axis pixel offset */

}

.img-2 {
  grid-column: 1; 
  grid-row: 2 / span 1;   /* 2 full rows = 4 half-rows */
}

.img-3 {
  grid-column: 2 ; 
  grid-row: 3 / span 1;   /* 1 full row = 2 half-rows */
}

.img-4 {
  grid-column: 2 ; 
  grid-row: 4 / span 1;   /* 1 full row = 2 half-rows */
}

.img-5 {
  grid-column: 4;          
  grid-row: 5/ span 2;   /* 2 full rows = 4 half-rows */
}

.img-6 {
  grid-column: 5;          
  grid-row: 5 / span 2;   /* 2 full rows = 4 half-rows */
}

.img-7 {
  display: none !important;
}

}