:root {
  --im-category-content-width: 1200px;
  --im-category-gap: 20px;
  --im-category-height: 165px;
  --im-category-radius: 20px;
}

.catalog-category-cards {
  width: min(var(--im-category-content-width), calc(100% - 40px));
  margin: 0 auto;
  padding: 40px 0;
}

html .home-categories__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--im-category-gap);
}

html .home-category-card {
  position: relative;
  display: block;
  grid-column: span 3;
  height: var(--im-category-height);
  overflow: hidden;
  color: #433228;
  text-decoration: none;
  border-radius: var(--im-category-radius);
  transform: translateZ(0);
  transition: transform 0.28s ease;
}

html .home-category-card__picture {
  position: absolute;
  inset: 0;
  display: block;
  background: #e3c4a8;
}

html .home-category-card__picture--wide {
  display: none;
}

html .home-category-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  transition: transform 0.35s ease;
}

html .home-category-card__title,
html .home-category-card--wide .home-category-card__title {
  position: absolute;
  z-index: 1;
  top: 24px;
  right: 24px;
  left: 24px;
  max-width: min(48%, 190px);
  color: #433228;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}

html .home-categories__grid[data-last-row-count="1"] .home-category-card--wide,
html .home-categories__grid[data-last-row-count="2"] .home-category-card--wide {
  grid-column: span 6;
}

html .home-categories__grid[data-last-row-count="3"] .home-category-card:nth-last-child(-n + 3) {
  grid-column: span 4;
}

html .home-category-card--wide .home-category-card__picture--standard {
  display: none;
}

html .home-category-card--wide .home-category-card__picture--wide {
  display: block;
}

html .home-category-card--wide .home-category-card__title {
  max-width: 260px;
}

html .home-category-card--wide-fallback .home-category-card__picture--wide .home-category-card__image {
  width: 50%;
  margin-left: auto;
  object-fit: contain;
  object-position: right center;
}

html .home-category-card:focus-visible {
  outline: 3px solid #ba1b1e;
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  html .home-category-card:hover {
    transform: translateY(-4px);
  }

  html .home-category-card:hover .home-category-card__image {
    transform: scale(1.04);
  }
}

@media screen and (max-width: 959px) {
  html .home-categories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html .home-categories__grid .home-category-card,
  html .home-categories__grid .home-category-card--wide {
    grid-column: auto;
    height: 148px;
  }

  html .home-categories__grid .home-category-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  html .home-category-card--wide .home-category-card__picture--standard {
    display: block;
  }

  html .home-category-card--wide .home-category-card__picture--wide {
    display: none;
  }

  /* Нечётная последняя плитка остаётся полноширинной и использует
     подготовленное для такой геометрии изображение. */
  html .home-categories__grid .home-category-card--wide:not(.home-category-card--wide-fallback):last-child:nth-child(odd) .home-category-card__picture--standard {
    display: none;
  }

  html .home-categories__grid .home-category-card--wide:not(.home-category-card--wide-fallback):last-child:nth-child(odd) .home-category-card__picture--wide {
    display: block;
  }

  html .home-category-card__title,
  html .home-category-card--wide .home-category-card__title {
    max-width: min(48%, 180px);
    font-size: 16px;
  }
}

@media screen and (max-width: 639px) {
  .catalog-category-cards {
    width: calc(100% - 32px);
    padding: 24px 0 32px;
  }

  html .home-categories__grid {
    gap: 12px;
  }

  html .home-categories__grid .home-category-card,
  html .home-categories__grid .home-category-card--wide {
    height: 116px;
    border-radius: 14px;
  }

  html .home-category-card__title,
  html .home-category-card--wide .home-category-card__title {
    top: 14px;
    right: 14px;
    left: 14px;
    max-width: 52%;
    font-size: 13px;
    line-height: 1.2;
  }
}

@media screen and (max-width: 359px) {
  .catalog-category-cards {
    width: calc(100% - 24px);
  }

  html .home-categories__grid {
    gap: 10px;
  }

  html .home-categories__grid .home-category-card {
    height: 108px;
  }

  html .home-category-card__title {
    top: 11px;
    left: 11px;
    font-size: 10px;
  }
}