.catalog {
  background: #21201f;
  font-family: manrope;
  padding: calc(64px + 16px) 50px calc(64px + 64px + 16px);
  border-radius: 64px 64px 0 0;
  margin-top: -64px;
}
@media (width < 768px) {
  .catalog {
    padding: 32px 16px calc(16px + 32px);
    margin-top: -16px;
    border-radius: 16px 16px 0 0;
  }
}

.catalog .catalog__title {
  color: #fff;
}

.catalog__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 180px;
  margin-top: 56px;
  gap: 24px;
}
@media (width < 1060px) {
  .catalog__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (width < 768px) {
  .catalog__grid {
    margin-top: 32px;
    gap: 16px;
  }
}
@media (width < 550px) {
  .catalog__grid {
    display: flex;
    flex-direction: column;
  }
}

.catalog__item {
  --padding: 40px;

  border-radius: 24px;
  padding: var(--padding);
  color: #fff;
  font-size: 40px;
  position: relative;

  transition: opacity 0.4s;
  &:hover {
    opacity: 0.6;
  }

  &::before {
    content: "";
    width: 48px;
    aspect-ratio: 1;
    background: center/cover no-repeat url("./img/arrow_orange.png");
    position: absolute;
    bottom: var(--padding);
    left: var(--padding);
  }

  &._small {
    --padding: 24px;
    font-size: 30px;
  }

  &:nth-of-type(1) {
    background: center/cover no-repeat url("./img/1.png");
    grid-row: 1/3;
  }
  &:nth-of-type(2) {
    background: center/cover no-repeat url("./img/2.png");
    grid-column: 2/4;
    grid-row: 1/3;
  }
  &:nth-of-type(3) {
    background: center/cover no-repeat url("./img/3.png");
    grid-row: 1/3;
    &::before {
      background-image: url("./img/arrow_white.png");
    }
  }
  &:nth-of-type(4) {
    background: center/cover no-repeat url("./img/4.png");
    grid-column: 1/3;
    grid-row: 3/5;
    &::before {
      background-image: url("./img/arrow_white.png");
    }
  }
  &:nth-of-type(5) {
    background: center/cover no-repeat url("./img/5.png");
    grid-row: 3/4;
    color: #21201f;
    &::before {
      background-image: url("./img/arrow_white.png");
    }
  }
  &:nth-of-type(6) {
    background: center/cover no-repeat url("./img/6.png");
    grid-row: 3/4;
    &::before {
      background-image: url("./img/arrow_white.png");
    }
  }
  &:nth-of-type(7) {
    background: center/cover no-repeat url("./img/7.png");
    grid-row: 5/6;
    &::before {
      background-image: url("./img/arrow_white.png");
    }
  }
  &:nth-of-type(8) {
    background: center/cover no-repeat url("./img/8.png");
    grid-row: 5/6;
    color: #21201f;
  }
  &:nth-of-type(9) {
    background: center/cover no-repeat url("./img/9.png");
    grid-column: 3/5;
    grid-row: 4/6;
    color: #21201f;
  }
}
@media (width < 1060px) {
  .catalog__item {
    --padding: 24px;
    font-size: 30px;

    &:nth-of-type(1) {
      grid-column: 1/2;
      grid-row: 1/2;
    }
    &:nth-of-type(2) {
      grid-column: 1/3;
      grid-row: 2/3;
    }
    &:nth-of-type(3) {
      grid-column: 2/3;
      grid-row: 1/2;
    }
    &:nth-of-type(4) {
      grid-column: 1/3;
      grid-row: 4/5;
    }
    &:nth-of-type(5) {
      grid-column: 1/2;
      grid-row: 3/4;
    }
    &:nth-of-type(6) {
      grid-column: 2/3;
      grid-row: 3/4;
    }
    &:nth-of-type(7) {
      grid-column: 1/2;
      grid-row: 5/6;
    }
    &:nth-of-type(8) {
      grid-column: 2/3;
      grid-row: 5/6;
    }
    &:nth-of-type(9) {
      grid-column: 1/3;
      grid-row: 6/7;
    }
  }
}
@media (width < 550px) {
  .catalog__item {
    aspect-ratio: 5/2;
    &::before {
      display: none;
    }
  }
}

.catalog__item-title {
  font-family: oswald;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.catalog__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  justify-content: center;
  margin-top: 56px;
  max-width: 994px;
  margin-inline: auto;
}
.catalog__button {
  font-weight: 400;
  padding: 18px 32px;
  border-radius: 16px;
  text-align: center;
  background: radial-gradient(65.49% 100% at 51.66% 0%, #ff8262 0%, #e84e26 52.4%, #e87726 100%);
  color: #fff;
  font-size: 24px;

  transition: opacity 0.4s;
  &:hover {
    opacity: 0.6;
  }

  &._buy {
    color: #21201f;
    background: radial-gradient(65.49% 100% at 51.66% 0%, #f1f1f1 0%, #ffffff 52.4%, #c6c6c6 100%);
  }
}
@media (width < 768px) {
  .catalog__buttons {
    margin-top: 32px;
  }
  .catalog__button {
    padding: 16px;
    font-size: 16px;
  }
}