.ThemeCollectionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-gap: var(--sizeM);
}
.ThemeCollectionGrid.smallGrid {
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}
.ThemeCollectionGrid.mediumGrid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.ThemeCollectionGrid.largeGrid {
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
}

.ThemeCollectionSquareGrid,
.fileInput > .preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 5px;
}
.ThemeCollectionSquareGrid:empty,
.fileInput > .preview:empty {
  display: none;
}
.ThemeCollectionSquareGrid:before,
.fileInput > .preview:before {
  content: "";
  width: 0;
  padding-bottom: 100%;
  grid-row: 1/1;
  grid-column: 1/1;
}
.ThemeCollectionSquareGrid > *:first-child,
.fileInput > .preview > *:first-child {
  grid-row: 1/1;
  grid-column: 1/1;
}
.ThemeCollectionSquareGrid > *,
.fileInput > .preview > * {
  width: 100% !important;
  height: 100% !important;
}
.ThemeCollectionSquareGrid.smallGrid,
.fileInput > .preview.smallGrid {
  grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
}
.ThemeCollectionSquareGrid.mediumGrid,
.fileInput > .preview.mediumGrid {
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
.ThemeCollectionSquareGrid.largeGrid,
.fileInput > .preview.largeGrid {
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.smallGridGap {
  grid-gap: 10px;
}

.mediumGridGap {
  grid-gap: 20px;
}

.largeGridGap {
  grid-gap: 50px;
}

.gridSpanAllColumns {
  grid-column: 1/-1;
}

@media screen and (orientation: landscape) {
  .flexGrid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: min-content;
  }

  .flexGrid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content;
  }

  .flexGrid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: min-content;
  }

  .flexGrid-5 {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: min-content;
  }

  .flexGrid-6 {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: min-content;
  }

  .flexGrid-7 {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: min-content;
  }

  .flexGrid-8 {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: min-content;
  }

  .flexGrid-9 {
    display: grid !important;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: min-content;
  }

  .flexGrid-10 {
    display: grid !important;
    grid-template-columns: repeat(10, 1fr);
    grid-auto-rows: min-content;
  }

  .flexGrid-11 {
    display: grid !important;
    grid-template-columns: repeat(11, 1fr);
    grid-auto-rows: min-content;
  }

  .flexGrid-12 {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: min-content;
  }
}