.category-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.category-grid__item {
  flex: 0 1 calc(100% / 4 - 2rem);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  max-width: 50%;
}

@media (max-width: 1199.98px) {
  .category-grid__item {
    flex: 0 1 calc(100% / 3 - 2rem);
  }
}
@media (max-width: 767.98px) {
  .category-grid__item {
    flex: 0 1 calc(100% / 2 - 2rem);
  }
}

.category-grid__img-ratio {
  aspect-ratio: 1/1;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.category-grid__img.hover-effect {
  transition: transform 0.2s;
}

.category-grid__img.hover-effect:hover {
  transform: scale(1.02);
  z-index: 1;
}