/* =========================================================
   SHARED GRID
   Portee: Gameotheque + Saturday
   ========================================================= */

/* Shared utilities */
.icon-game svg {
  width: auto !important;
  height: 25px !important;
}

.flex-grow-1 {
  flex-grow: 1;
}

.filters-sidebar {
  min-width: 260px;
}

.filters-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 0.5rem;
  align-items: start;
  overflow: visible;
}

#filters-sticky {
  position: static;
}

@media (min-width: 992px) {
  #filters-sticky {
    position: sticky;
    top: 150px;
    align-self: flex-start;
    height: fit-content;
  }
}

@media (max-width: 991.98px) {
  .filters-layout {
    grid-template-columns: 1fr;
  }
}

.input-group .form-control {
  padding-right: 2.5rem;
}

.table-responsive {
  overflow-x: inherit !important;
}

/* Shared card grid */
.game-grid {
  margin: 0 auto;
}

.card-game {
  margin: 0.5rem;
  width: calc(100% / 2 - var(--card-spacing));
}

@media screen and (min-width: 576px) {
  .card-game {
    width: calc(100% / 3 - var(--card-spacing));
  }
}

@media screen and (min-width: 768px) {
  .card-game {
    width: calc(100% / 4 - var(--card-spacing));
  }
}

@media screen and (min-width: 1200px) {
  .card-game {
    width: calc(100% / 6 - var(--card-spacing));
  }
}

@media screen and (min-width: 1600px) {
  .card-game {
    width: calc(100% / 7 - var(--card-spacing));
  }
}