/* --- 1. Distribute Rows Vertically (Parent Container) --- */
.grid-container {
  display: flex; /* Enables Flexbox */
  flex-direction: column; /* Stacks the rows vertically */
  height: 100vh !important;  /* Set to full viewport height (or the height of its parent) */
  width: 100vw !important; /* Set to full viewport width (or the width of its parent) */
}

/* --- 2. Distribute Rows Equally (Flex Items of the Container) --- */
.grid-row {
  display: flex; /* Enables Flexbox for columns within the row */
  flex-grow: 1; /* **Crucial:** Makes all rows equally distribute the container's height */
  flex-shrink: 0; /* Prevents rows from shrinking below their content size if specified */
  flex-basis: 0; /* Ensures even distribution based on the remaining space */
}

/* --- 3. Distribute Columns Horizontally (Flex Items of the Row) --- */
.grid-cell {
  flex-grow: 1; /* **Crucial:** Makes all cells/columns in a row equally distribute the row's width */
  flex-shrink: 0;
  flex-basis: 0;
  
  /* Optional: for visualization */
  border: 1px solid #ccc; 
  /*padding: 10px; */
  box-sizing: border-box; /* Includes padding and border in the element's total width and height */
  
  /* Center content within the cell */
  display: flex;
  justify-content: center;
  align-items: center;
}