@use './variables' as *;

.grid {
  display: grid;
  grid-template-columns: var(--hs-grid-templateColumns);
  grid-template-rows: var(--hs-grid-templateRows);
  grid-auto-flow: var(--hs-grid-autoFlow, row);
  justify-content: var(--hs-grid-justifyContent, stretch);
  align-items: var(--hs-grid-alignItems, stretch);
  gap: var(--hs-grid-gap, 0);
  max-width: 100%;

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

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