@use '@carbon/layout';
@use '@openmrs/esm-styleguide/src/vars' as *;

.cardContainer {
  background-color: $ui-02;
  display: flex;
  padding: layout.$spacing-05;
  flex-flow: row wrap;
  gap: layout.$spacing-05;
  align-items: stretch;
}

.cardContainer > * {
  flex: 1 0 0%;
  min-width: 16rem;
}

// If we're on tablet and the screen is too small for 3 cards across
// @TODO: This will do nonsense things if there are not exactly 3 cards
@media (max-width: calc(layout.$spacing-05 * 4 + 18.75rem * 3)) {
  :global(.omrs-breakpoint-lt-desktop) {
    .cardContainer > *:has(:global(.cardWithChildren)) {
      order: 999;
    }
  }
}

// If we're on desktop and the screen is too small for the left nav bar
// plus 3 cards across
@media (max-width: calc(16rem + layout.$spacing-05 * 4 + 18.75rem * 3)) {
  :global(.omrs-breakpoint-gt-tablet) {
    .cardContainer > *:has(:global(.cardWithChildren)) {
      order: 999;
    }
  }
}