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

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

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

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

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

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

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

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

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

.gruppoGiochi15 {
  padding: 36px 0 36px 36px;
  margin: -36px 0 -36px -36px;
  box-sizing:content-box;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  display: grid;
  grid-gap: var(--grid-gap-gruppoGiochi15);
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--numero-righe-grid-gruppoGiochi15), 1fr);
  grid-auto-columns: var(--larghezza-singolo-quadrato);
}

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

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

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

/* Inizio - Lauyout che devono avere i figli di .gruppoGiochi15.  */
.gruppoGiochi15 > *:first-child {
  grid-column: span 1;
  grid-row: span 2;
}
.gruppoGiochi15 > *:not(:first-child) {
  grid-column: span 1;
  grid-row: span 1;
}
/* Fine - Lauyout che devono avere i figli di .gruppoGiochi15.  */

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