:root {
  --numero-righe-grid-gruppoGiochi3: var(--VAR-numero-righe-grid-gruppoGiochi3);
  --numero-di-colonne-grid-gruppoGiochi3: var(
    --VAR-numero-di-colonne-grid-gruppoGiochi3
  ); /* A questo numero verrà aggiunto 0.5 per far si che si veda mezza grid in più al fine di indicare che si può scrollare*/
  --grid-gap-gruppoGiochi3: var(--VAR-grid-gap-gruppoGiochi3);
}

.g-3__containerGridOuter {
  position: relative;
  width: 100%;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;

  display: grid; /* Questa regola serve a per il browser Safari, altrimenti le righe interne non prendono l'altezza 1fr (è un bug di Safari) */

  /* Larghezza Singolo Quadrato - Non modificare questa formula */
  --larghezza-singolo-quadrato: calc(
    (
        100% - var(--numero-di-colonne-grid-gruppoGiochi3) *
          var(--grid-gap-gruppoGiochi3)
      ) / (var(--numero-di-colonne-grid-gruppoGiochi3) + 0.5)
  );

  /* Padding Bottom Del container, basato sul numero di colonne - Non modificare questa formula*/
  --padding-bottom-container-grid: calc(
    var(--larghezza-singolo-quadrato) * var(--numero-righe-grid-gruppoGiochi3) +
      (
        (var(--numero-righe-grid-gruppoGiochi3) - 1) *
          var(--grid-gap-gruppoGiochi3)
      )
  );
}

.g-3__containerGridOuter::after {
  padding-bottom: var(--padding-bottom-container-grid);
  content: "";
  display: block;
}

.g-3__containerGridInner {
  position: absolute;
  width: 100%;
  height: 100%;
}

.gruppoGiochi3 {
  position: absolute;
  width: 100%;
  height: 100%;

  overflow-x: scroll;
  overflow-y: hidden;

  display: grid;
  grid-gap: var(--grid-gap-gruppoGiochi3);
  grid-auto-flow: column;

  grid-template-rows: repeat(var(--numero-righe-grid-gruppoGiochi3), 1fr);

  grid-auto-columns: var(--larghezza-singolo-quadrato);
}

.gruppoGiochi3::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.gruppoGiochi3 {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.gruppoGiochi3 > * {
  min-width: 0;
  min-height: 0;
}

.abc {
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  /* margin: 12px 0 12px 12px; */
}

/* Inizio - Lauyout che devono avere i figli di .gruppoGiochi3.  */
.gruppoGiochi3 > * {
  grid-column: span 1;
  grid-row: span 1;
}

/* Fine - Lauyout che devono avere i figli di .gruppoGiochi3.  */

/* Aggiungiamo un'ultima colonna vuota in modo tale da creare uno spazio di separazione alla fine */
/* .gruppoGiochi3::after {
  content: "";
  grid-row: 1 / span var(--numero-righe-grid-gruppoGiochi3);
  width: 0.1px;
} */

.gruppoGiochi3 > *:last-child {
  box-sizing: border-box;
  width: calc(100% + var(--grid-gap-gruppoGiochi3));
  padding-right: var(--grid-gap-gruppoGiochi3);
}