/* TODO unificare regole comuni flex e grid */

.grid {
  --_cols: 1;
  /* --_min-col-width: calc((100% - calc(var(--_cols) * var(--flex-grid-gap))) / var(--grid-cols)); */

  display: grid;
  /* grid-template-columns: repeat(var(--_cols), minmax(var(--grid-min-col-width), 1fr)); */
  grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
  grid-auto-flow: row;
  gap: var(--flex-grid-gap);
  /* align-items: center; */
  /* justify-items: start; */

  &.justify-content-end {
    justify-content: end;
  }


  @media (--media-medium-viewport-up) {
    --_cols: 2;

    > .span-2, > .span-3, > .span-4 {
      grid-column-end: span 2;
    }
  }

  @media (--media-large-viewport-up) {
    --_cols: 4;

    /* versione a 3, 5, 6, 8 colonne */
    &.grid-2 {
      --_cols: 2;
    }
    &.grid-3 {
      --_cols: 3;
    }
    &.grid-5 {
      --_cols: 5;
    }
    &.grid-6 {
      --_cols: 6;
    }
    &.grid-8 {
      --_cols: 8;
    }

    > .span-2 {
      grid-column-end: span 2;
    }
    > .span-3 {
      grid-column-end: span 3;
    }

    > .span-4 {
      grid-column-end: span 4;
    }
  } /* end @media */

  /* grid items */
  > .grid-item-last {
    grid-column: -2 / -1;
  }
  > .grid-full-row {
    grid-column: 1 / -1;
  }

}

.grid-new-row {
  grid-column-start: 1;
}

.justify-self-end {
  justify-self: end;
}
.justify-self-start {
  justify-self: start;
}