.catalog-categories { margin-top: 116px; }
.catalog-products   { margin-top: 32px; }
.footer             { margin-top: 76px; }

.catalog-categories__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  height: 45px;
}

.catalog-categories__search {
  flex: none;
  width: 310px;
}

.gamelist {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 36px;
}

.gamelist__item {
  flex: 0 1 333px;
  max-width: 333px;
  container-type: inline-size;
}

.game {
  --u: min(1px, 0.3003cqw);

  position: relative;
  display: block;
  height: calc(54 * var(--u));
  background: var(--c-surface);
  border-radius: calc(14 * var(--u));
  overflow: hidden;
}

.game__name {
  position: absolute;
  left: calc(22 * var(--u));
  top: calc(14 * var(--u));
  font-size: calc(21 * var(--u));
  font-weight: 400;
  line-height: 1.17;
  color: var(--c-ink-soft);
}

.catalog-products {
  width: min(1436px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.catalog-sort {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  height: 25px;
}
.catalog-sort a {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.17;
  white-space: nowrap;
}
.catalog-sort a:hover { text-decoration: underline; }

.catalog-products .scard-grid {
  max-width: none;
  margin-top: 27px;
}

@media (max-width: 1023px) {
  .catalog-categories { margin-top: 56px; }
  .catalog-products { margin-top: 28px; }
  .footer { margin-top: 48px; }

  .catalog-categories__head {
    flex-wrap: wrap;
    height: auto;
    gap: 16px;
  }
  .catalog-categories__search { width: 100%; }

  .gamelist { gap: 16px 20px; }
  .catalog-sort { gap: 16px; }
  .catalog-sort a { font-size: 17px; }
}

@media (max-width: 640px) {
  .gamelist__item { flex-basis: 100%; }
}