@use '../variables' as *;

.gridItem {
  grid-column: var(--hscl-gridItem-gridColumn);
  grid-row: var(--hscl-gridItem-gridRow);
  justify-self: var(--hscl-gridItem-justifySelf);
  align-self: var(--hscl-gridItem-alignSelf);

  @media (min-width: $breakpoint-md) {
    grid-column: var(
      --hscl-gridItem-gridColumn-md,
      var(--hscl-gridItem-gridColumn)
    );
    grid-row: var(
      --hscl-gridItem-gridRow-md,
      var(--hscl-gridItem-gridRow)
    );
    justify-self: var(
      --hscl-gridItem-justifySelf-md,
      var(--hscl-gridItem-justifySelf)
    );
    align-self: var(
      --hscl-gridItem-alignSelf-md,
      var(--hscl-gridItem-alignSelf)
    );
  }

  @media (min-width: $breakpoint-lg) {
    grid-column: var(
      --hscl-gridItem-gridColumn-lg,
      var(--hscl-gridItem-gridColumn-md, var(--hscl-gridItem-gridColumn))
    );
    grid-row: var(
      --hscl-gridItem-gridRow-lg,
      var(--hscl-gridItem-gridRow-md, var(--hscl-gridItem-gridRow))
    );
    justify-self: var(
      --hscl-gridItem-justifySelf-lg,
      var(--hscl-gridItem-justifySelf-md, var(--hscl-gridItem-justifySelf))
    );
    align-self: var(
      --hscl-gridItem-alignSelf-lg,
      var(--hscl-gridItem-alignSelf-md, var(--hscl-gridItem-alignSelf))
    );
  }
}
