@use "../../variables/media-query-breakpoints";

@use "../grid/grid.variables" as css-grid-variables;

.dso-card-grid {
  display: grid;
  gap: css-grid-variables.$grid-gutter-width;
  grid-auto-rows: 1fr;

  .dso-card {
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
  }

  @media (max-width: media-query-breakpoints.$screen-sm-max) {
    grid-template-columns: repeat(1, 1fr);
  }

  @media (min-width: media-query-breakpoints.$screen-md-min) and (max-width: media-query-breakpoints.$screen-md-max) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: media-query-breakpoints.$screen-lg-min) {
    grid-template-columns: repeat(3, 1fr);
  }
}