:root {
  --numero-righe-grid-gruppoGiochi1__RigaMultiGiochi1: var(--VAR-numero-righe-grid-g-12__RigaMultiGiochi1);
  --numero-di-colonne-grid-gruppoGiochi1__RigaMultiGiochi1: var(
    --VAR-numero-di-colonne-grid-g-12__RigaMultiGiochi1
  );
  --grid-gap-gruppoGiochi1__RigaMultiGiochi1: var(--VAR-grid-gap-g-12__RigaMultiGiochi1);
}

.g-12__RigaMultiGiochi1__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% -
          calc(
            (var(--numero-di-colonne-grid-gruppoGiochi1__RigaMultiGiochi1) - 1) *
              var(--grid-gap-gruppoGiochi1__RigaMultiGiochi1)
          )
      ) / (var(--numero-di-colonne-grid-gruppoGiochi1__RigaMultiGiochi1))
  );

  /* 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__RigaMultiGiochi1) +
      ((var(--numero-righe-grid-gruppoGiochi1__RigaMultiGiochi1) - 1) * var(--grid-gap-gruppoGiochi1__RigaMultiGiochi1))
  );
}

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

.g-12__RigaMultiGiochi1__containerGridInner {
  position: absolute;
  width: 100%;
  height: 100%;
}

.gruppoGiochi12__RigaMultiGiochi1 {
  padding: 50px 50px 50px 50px;
  margin: -50px -50px -50px -50px;
  box-sizing: content-box;

  position: absolute;
  width: 100%;
  height: 100%;

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

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

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

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

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

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

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

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

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

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