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

  --form-factor-immagine-gruppoGiochi-FixedFormFactor-1: var(
    --VAR-form-factor-immagine-gruppoGiochi-FixedFormFactor-1
  );
}

.g-FixedFormFactor-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-gruppoGiochi-FixedFormFactor-1) *
          var(--grid-gap-gruppoGiochi-FixedFormFactor-1)
      ) / (var(--numero-di-colonne-grid-gruppoGiochi-FixedFormFactor-1) + 0.5)
  );

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

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

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

.gruppoGiochi-FixedFormFactor-1 {
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 100%;

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

  display: grid;
  grid-gap: var(--grid-gap-gruppoGiochi-FixedFormFactor-1);
  grid-auto-flow: column;

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

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

.gruppoGiochi-FixedFormFactor-1::-webkit-scrollbar {
  display: none;
}

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

.gruppoGiochi-FixedFormFactor-1 > * {
  min-width: 0;
  min-height: 0;
}

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

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

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