SidePictureCards

<SidePictureCards
      items={[
          {
              title: "Решение для помещений",
              image: { src: image.src, srcWide: imageWide.src, alt: "picture" },
              iconItems: [
                  { icon: <VideoIcon />, text: "Камера: доставка, установка, настройка", info: "5 500 ₽" },
                  { icon: <UploadIcon />, text: "Облачное хранение", info: "от 399 ₽/мес" },
                  { icon: <WiFiIcon />, text: "Интернет", info: "от 500 ₽/мес" },
              ],
              button: {
                  title: "Добавить в корзину",
                  href: "#"
              },
          },
          {
              title: "Максимум 40 символов в 2 строки, далее троеточие, ",
              image: { src: image.src, srcWide: imageWide.src, alt: "picture" },
              iconItems: [
                  { icon: <VideoIcon />, text: "Минимум 2 и максимум 4 блока информации с иконками" },
                  { icon:
                      <WiFiIcon />,
                      text: "Текст максимум 50 символов в 3 строки, далее троеточие при переполнении",
                      info: "Максимум 40 символов в 2 строки, далее троеточие",
                  },
              ],
              button: {
                  title: "Добавить в корзину",
                  href: "#"
              },
          }
      ]}
  />

<SidePictureCards
      items={[1, 2].map((item, index) => ({
          title: "Title",
          image: { src: image.src, srcWide: imageWide.src, alt: "picture"
          },
          iconItems: index === 0 ? [
              { icon: <VideoIcon />, text: "Text" },
              { icon: <UploadIcon />, text: "Text" },
              { icon: <WiFiIcon />, text: "Text" },
              { icon: <WiFiIcon />, text: "Text" },
          ] : [
              { icon: <VideoIcon />, info: "Info" },
              { icon: <UploadIcon />, info: "Info" },
              { icon: <WiFiIcon />, info: "Info" },
          ],
          button: {
              title: "Button",
              href: "#"
          },
      }))}
  />

<SidePictureCards
      items={[1, 2].map((item, index) => ({
          title: index === 0 ? "Title" : undefined,
          image: { src: image.src, srcWide: imageWide.src, alt: "picture"
          },
          iconItems: [
              { icon: <VideoIcon />, text: "Text", info: "Info" },
              { icon: <UploadIcon />, text: "Text", info: "Info" },
          ],
          button: index !== 0 ? {
              title: "Button",
              href: "#"
          } : undefined,
      }))}
  />

<Container>
      <TitleDescriptionBox title="Gray на белом фоне" />
      <SidePictureCards
          background="gray"
          items={[1, 2, 3].map(item => ({
              title: "Title",
              image: { src: image.src, srcWide: imageWide.src, alt: "picture"
              },
              iconItems: [
                  { icon: <VideoIcon />, text: "Text", info: "Info" },
                  { icon: <UploadIcon />, text: "Text", info: "Info" },
                  { icon: <WiFiIcon />, text: "Text", info: "Info" },
              ],
              href: "#",
          }))}
      />
  </Container>
  <Container backgroundColor="light-gray">
      <TitleDescriptionBox title="White на сером фоне" />
      <SidePictureCards
          background="white"
          items={[1, 2, 3, 4].map(item => ({
              title: "Title",
              image: { src: image.src, srcWide: imageWide.src, alt: "picture"
              },
              iconItems: [
                  { icon: <VideoIcon />, text: "Text", info: "Info" },
                  { icon: <UploadIcon />, text: "Text", info: "Info" },
                  { icon: <WiFiIcon />, text: "Text", info: "Info" },
              ],
              href: "#",
          }))}
      />
  </Container>