@use './variables' as *;

.grid {
  display: var(--hscl-grid-display, grid);
  grid-template-columns: var(--hscl-grid-templateColumns);
  grid-template-rows: var(--hscl-grid-templateRows);
  grid-auto-flow: var(--hscl-grid-autoFlow, row);
  grid-auto-columns: var(--hscl-grid-autoColumns);
  grid-auto-rows: var(--hscl-grid-autoRows);
  justify-content: var(--hscl-grid-justifyContent, stretch);
  align-items: var(--hscl-grid-alignItems, stretch);
  gap: var(--hscl-grid-gap, 0);
  padding-inline: var(--hscl-grid-paddingInline);
  padding-block: var(--hscl-grid-paddingBlock);
  margin-inline: var(--hscl-grid-marginInline);
  margin-block: var(--hscl-grid-marginBlock);
  max-width: var(--hscl-grid-maxWidth, 100%);
  max-height: var(--hscl-grid-maxHeight, auto);

  @media (min-width: $breakpoint-md) {
    grid-template-columns: var(
      --hscl-grid-templateColumns-md,
      var(--hscl-grid-templateColumns)
    );
    grid-template-rows: var(
      --hscl-grid-templateRows-md,
      var(--hscl-grid-templateRows)
    );
    grid-auto-flow: var(
      --hscl-grid-autoFlow-md,
      var(--hscl-grid-autoFlow, row)
    );
    justify-content: var(
      --hscl-grid-justifyContent-md,
      var(--hscl-grid-justifyContent, stretch)
    );
    align-items: var(
      --hscl-grid-alignItems-md,
      var(--hscl-grid-alignItems, stretch)
    );
    gap: var(
      --hscl-grid-gap-md,
      var(--hscl-grid-gap, 0)
    );
  }

  @media (min-width: $breakpoint-lg) {
    grid-template-columns: var(
      --hscl-grid-templateColumns-lg,
      var(--hscl-grid-templateColumns-md, var(--hscl-grid-templateColumns))
    );
    grid-template-rows: var(
      --hscl-grid-templateRows-lg,
      var(--hscl-grid-templateRows-md, var(--hscl-grid-templateRows))
    );
    grid-auto-flow: var(
      --hscl-grid-autoFlow-lg,
      var(--hscl-grid-autoFlow-md, var(--hscl-grid-autoFlow, row))
    );
    justify-content: var(
      --hscl-grid-justifyContent-lg,
      var(--hscl-grid-justifyContent-md, var(--hscl-grid-justifyContent, stretch))
    );
    align-items: var(
      --hscl-grid-alignItems-lg,
      var(--hscl-grid-alignItems-md, var(--hscl-grid-alignItems, stretch))
    );
    gap: var(
      --hscl-grid-gap-lg,
      var(--hscl-grid-gap-md, var(--hscl-grid-gap, 0))
    );
  }
}
