:root {
  /* GruppoGiochi1 */
  --VAR-numero-righe-grid-gruppoGiochi1: 1;
  --VAR-numero-di-colonne-grid-gruppoGiochi1: 3;
  --VAR-numero-di-colonne-grid-gruppoGiochi1-tablet: 7;
  --VAR-grid-gap-gruppoGiochi1: 12px;
}

.rigaMultiGiochi3 .g-1__containerGridOuter {
  --numero-righe-grid-gruppoGiochi1: 1;
  --numero-di-colonne-grid-gruppoGiochi1: 3;
  /* 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-gruppoGiochi1: 12px;
}

@media screen and (min-width: 768px) {
  :root {
    --VAR-numero-di-colonne-grid-gruppoGiochi1: var(
      --VAR-numero-di-colonne-grid-gruppoGiochi1-tablet
    );
  }
}

 

:root {
  --numero-righe-grid-gruppoGiochi1: var(--VAR-numero-righe-grid-gruppoGiochi1);
  --numero-di-colonne-grid-gruppoGiochi1: var(
    --VAR-numero-di-colonne-grid-gruppoGiochi1
  ); /* 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-gruppoGiochi1: var(--VAR-grid-gap-gruppoGiochi1);
}

.g-1__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-gruppoGiochi1) *
          var(--grid-gap-gruppoGiochi1)
      ) / (var(--numero-di-colonne-grid-gruppoGiochi1) + 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-gruppoGiochi1) +
      (
        (var(--numero-righe-grid-gruppoGiochi1) - 1) *
          var(--grid-gap-gruppoGiochi1)
      )
  );
}

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

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

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

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

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

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

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

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

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

.gruppoGiochi1 > * {
  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 .gruppoGiochi1.  */
.gruppoGiochi1 > * {
  grid-column: span 1;
  grid-row: span 1;
  /* background-color: aquamarine; */
}
/* Fine - Lauyout che devono avere i figli di .gruppoGiochi1.  */

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

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