/* --- Default Styles (for larger screens, e.g., desktop/tablet) --- */

.widget-row {
  display: flex; /* Aligns children horizontally by default */
  gap: 0px;     /* Space between cards on larger screens */
  flex-wrap: nowrap; /* Ensures cards stay in one row on larger screens */
  margin-top: 24px; /* Added some margin-top to match the spacing in Image 2 if needed */
}

.widget-row > .TitleContainer__container {
  /* This calculation ensures each card takes up 1/3 of the width, with gaps */
  width: calc((100% - (2 * 30px)) / 3);
  /* You might also need to ensure the minimum width is not too small
     min-width: 250px; /* Example: Prevent cards from becoming too narrow */
}


/* --- Mobile-Specific Styles (using a Media Query) --- */

@media (max-width: 768px) { /* Adjust '768px' if your mobile breakpoint is different */
  .widget-row {
    flex-direction: column; /* Stacks children vertically on small screens */
    gap: 16px;              /* Adjust vertical space between stacked cards on mobile */
    margin-top: 16px;       /* Adjust margin-top for mobile if needed */
  }

  .widget-row > .TitleContainer__container {
    width: 100%; /* Each card takes up full width on mobile */
  }
}