.catalog-hero {
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 80px 60px;
  overflow: hidden;
  position: relative;
}

.catalog-hero__bg-shapes {
  position: absolute;
  left: 137px;
  top: 9px;
  width: 927px;
  height: 808px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.catalog-hero__bg-shape {
  transform: rotate(-83.11deg);
  width: 712px;
  height: 848px;
}

.catalog-hero__title {
  font-family: var(--font-lato);
  font-weight: 700;
  font-size: 50px;
  line-height: 1;
  color: var(--color-pink);
  text-align: center;
  position: relative;
  z-index: 1;
  width: 100%;
}

.catalog-hero__collage {
  position: relative;
  width: 957px;
  height: 559px;
  z-index: 1;
  flex-shrink: 0;
}

.catalog-hero__thumb {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s, z-index 0.3s;
}

.catalog-hero__thumb:hover {
  z-index: 10;
  filter: brightness(1.1);
}

.catalog-hero__thumb img {
  width: 325px;
  height: 325px;
  border-radius: 20px;
  object-fit: cover;
  display: block;
}

.catalog-hero__thumb--1 {
  left: 543px;
  top: 14px;
  width: 414px;
  height: 414px;
  transform: rotate(19.43deg);
}

.catalog-hero__thumb--2 {
  left: 0;
  top: 0;
  width: 417px;
  height: 417px;
  transform: rotate(20.27deg);
}

.catalog-hero__thumb--3 {
  left: 523px;
  top: 192px;
  width: 367px;
  height: 367px;
  transform: rotate(8.08deg);
}

.catalog-hero__thumb--4 {
  left: 278px;
  top: 55px;
  width: 373px;
  height: 373px;
  transform: rotate(9.43deg);
}

.catalog-hero__thumb--5 {
  left: 112px;
  top: 122px;
  width: 364px;
  height: 364px;
  transform: rotate(-7.44deg);
}

.catalog-hero__thumb--6 {
  left: 237px;
  top: 122px;
  width: 414px;
  height: 414px;
  transform: rotate(19.4deg);
}

.catalog-hero__description {
  font-family: var(--font-poppins);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-text-gray);
  text-align: center;
  position: relative;
  z-index: 1;
  width: 100%;
}

.catalog-hero__description p + p {
  margin-top: 20.8px;
}

.catalog-categories {
  background-color: var(--color-bg);
  padding: 40px 60px;
  overflow: hidden;
}

.catalog-categories__grid {
  display: flex;
  gap: 20px;
}

.catalog-categories__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.catalog-categories__dot {
  width: 18px;
  height: 18px;
}

.catalog-categories__content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.catalog-categories__name {
  font-family: var(--font-poppins);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: #fff;
}

.catalog-categories__label {
  font-family: var(--font-poppins);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-text-white-70);
}

@media (max-width: 768px) {
  .catalog-hero {
    padding: 40px 20px;
    gap: 20px;
  }

  .catalog-hero__bg-shapes {
    left: -83px;
    top: -24px;
    width: 584px;
    height: 509px;
  }

  .catalog-hero__bg-shape {
    width: 448px;
    height: 534px;
  }

  .catalog-hero__title {
    font-size: 32px;
  }

  .catalog-hero__collage {
    width: 100%;
    height: 228px;
    max-width: 390px;
  }

  .catalog-hero__thumb img {
    width: 132px;
    height: 132px;
    border-radius: 8px;
  }

  .catalog-hero__thumb--1 {
    left: 56.7%;
    top: 2.5%;
    width: 169px;
    height: 169px;
  }

  .catalog-hero__thumb--2 {
    left: 0;
    top: 0;
    width: 170px;
    height: 170px;
  }

  .catalog-hero__thumb--3 {
    left: 54.6%;
    top: 34.3%;
    width: 150px;
    height: 150px;
  }

  .catalog-hero__thumb--4 {
    left: 29%;
    top: 9.8%;
    width: 152px;
    height: 152px;
  }

  .catalog-hero__thumb--5 {
    left: 11.7%;
    top: 21.8%;
    width: 148px;
    height: 148px;
  }

  .catalog-hero__thumb--6 {
    left: 24.8%;
    top: 21.9%;
    width: 169px;
    height: 169px;
  }

  .catalog-categories {
    padding: 40px 20px;
  }

  .catalog-categories__grid {
    flex-direction: column;
  }
}