Инфраструктура

<ResponsiveStyle
  common="
  :root {
    --container-sides-padding: 0 !important;
  }
  .spief {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    height: 100dvh;
  }
  .spief a {
    text-decoration: none;
  }
  .spief ul li::marker {
    color: #42E3B4;
  }
  .content-wrapper {
    flex-grow: 1;
    width: 100%;
    min-height: 0;
  }
  .video-wrapper {
    display: flex;
    flex-direction: column;
  }
  .header-with-logo {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    margin: 0 0 1rem;
  }
  .header-with-logo .logo {
    flex-shrink: 0;
    max-width: 7rem;
    height: auto;
    object-fit: contain;
    object-position: top;
  }
  .header-with-logo .header {
    flex-grow: 1;
    margin: 0;
    font-weight: 600;
    text-align: center;
    text-wrap: wrap;
  }
  .header-with-logo .side-header {
    margin: 0 0 0 auto;
    max-width: 22.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.375rem;
    text-align: right;
    text-wrap: wrap;
  }
  .layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    grid-auto-flow: row;
    gap: 1rem;
  }
  .layout.cards-2 > * {
    grid-column-end: span 6;
  }
  .layout.cards-3 > * {
    grid-column-end: span 4;
  }
  .layout.cards-4 > * {
    grid-column-end: span 6;
  }
  .layout.cards-5 > *:nth-child(1),
  .layout.cards-5 > *:nth-child(2) {
    grid-column-end: span 6;
  }
  .layout.cards-5 > *:nth-child(3),
  .layout.cards-5 > *:nth-child(4),
  .layout.cards-5 > *:nth-child(5) {
    grid-column-end: span 4;
  }
  .layout.cards-6 > * {
    grid-column-end: span 4;
  }
  .card {
    border: 1px solid #ffffff;
    border-radius: 1.5rem;
    background-color: rgba(255, 255, 255, 0.56);
    backdrop-filter: blur(24px);
  }
  .navigation-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 1.5rem 0 0;
    padding: 0 0.25rem;
  }
  .controls .button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    padding: 0 1.25rem;
    height: 3rem;
    border: none;
    border-radius: 1000px;
    outline: none;
    background: none;
    cursor: pointer;
  }
  .controls .button.icon-button {
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
  }
  .button .icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .home-icon {
    background-image: url(https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/f9b7a42b_home-icon.png);
  }
  .arrow-left-icon {
    background-image: url(https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/9014990c_arrow-left-icon.png);
  }
  .controls .button.primary {
    background-color: #074F3B;
    color: #ffffff !important;
  }
  .controls .button.secondary {
    background-color: rgba(8, 8, 8, 0.06);
    color: rgba(8, 8, 8, 0.96) !important;
  }
  .link-clear span,
  .link-clear img {
    display: none;
  }
  .controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  .bold-text {
    font-weight: 600;
  }
  .demo-video {
    margin: auto;
    width: 100%;
    max-height: 100%;
    border-radius: 1rem;
  }
  html {
    font-size: clamp(16px, 1.66666667vw, 32px) !important;
  }
  #__next > * > div:first-of-type > * > *,
  #__next > * > div:first-of-type > * > * > * > * {
    max-width: none !important;
  }
  "
/>

<ResponsiveStyle
  common="
    .content-grid{
      height: 100%;
      grid-template-columns: repeat(10, 1fr);
      gap: 1rem;
      padding: 1.2rem 0;
    }
    .card {
      padding: 1rem;
      border-radius: 1.6rem;
    }
    .card_green {
      background: #00c68f;
      grid-column-end: span 4;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .card_white {
      grid-column-end: span 6;
      background: #fff;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: space-between;
    }
    .card-title {
      margin: 0 0 0.6rem;
      font-size: 2.4rem;
      line-height: 2.5rem;
      color: #fff;
    }
    .card-flexbox {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .gigacard {
      padding: 0.6rem;
      background: #FFFFFFE5;
      border-radius: 0.6rem;
    }
    .gigacard_1 { flex: 0 0 calc(46% - 0.25rem); }
    .gigacard_2 { flex: 0 0 calc(54% - 0.25rem); }
    .gigacard_3 { flex: 0 0 calc(46% - 0.25rem); }
    .gigacard_4 { flex: 0 0 calc(54% - 0.25rem); }
    .gigacard-img {
      width: 100%;
      height: auto;
      display: block;
    }
    .gigacard-img_2{
      width: 69%;
    }
    .greycards-grid{
      height: 100%;
      grid-template-columns: repeat(10, 1fr);
      gap: 1rem;
      flex: 1;
    }
    .greycard{
      grid-column-end: span 5;
      padding: 0.7rem;
      border-radius: 1rem;
      background: #0000000F;
    }
    .greycard-title{
      color: #000;
      font-size: 1.3rem;
      line-height: 1.4rem;
      margin: 0 0 0.1rem;
    }
    .greycard-text{
      font-size: 0.8rem;
      line-height: 1rem;
      color: #000;
      margin: 0;
    }
    .demo-custom-btn{
      width: 100%;
    }
  "
/>

<div className="spief">
  {/*  */}
  <div className="content-wrapper">
    <Grid columns={10} className="content-grid">
      <Cell width={4} className="card card_green">
        <div>
          <h2 className="card-title">Новейшие<br/>модели</h2>
          <div className="card-flexbox">
            <div className="gigacard gigacard_1">
              <img
                src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/cfa0a279_gigalite.png"
                className="gigacard-img"
              />
            </div>
            <div className="gigacard gigacard_2">
              <img
                src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/fa913548_gigapro.png"
                className="gigacard-img gigacard-img_2"
              />
            </div>
            <div className="gigacard gigacard_3">
              <img
                src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/010592d6_gigamax.png"
                className="gigacard-img"
              />
            </div>
            <div className="gigacard gigacard_4">
              <img
                src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/82cc256f_gigaultra.png"
                className="gigacard-img"
              />
            </div>
          </div>
        </div>
      </Cell>
      <Cell width={6} className="card card_white">
        <Grid columns={10} className="greycards-grid">
          <Cell width={5} className="greycard">
            <h4 className="greycard-title">Публичное облако</h4>
            <TextS className="greycard-text">
              Аренда вычислительных ресурсов с мгновенным доступом
            </TextS>
          </Cell>
          <Cell width={5} className="greycard">
            <h4 className="greycard-title">Частное облако</h4>
            <TextS className="greycard-text">
              Выделенная инфраструктура в контуре компании
            </TextS>
          </Cell>
          <Cell width={5} className="greycard">
            <h4 className="greycard-title">Гибридное облако</h4>
            <TextS className="greycard-text">
              Платформа, объединяющая локальную инфраструктуру и публичное
              облако
            </TextS>
          </Cell>
          <Cell width={5} className="greycard">
            <h4 className="greycard-title">ПАК</h4>
            <TextS className="greycard-text">
              Развёртывание ГигаЧат Бизнес на ваших серверах, данные не покидают
              защищённый контур компании
            </TextS>
          </Cell>
        </Grid>
        <div className="controls">
          <a href="/pmef_2026/infra/demo" className="demo-custom-btn">
            <button className="button primary demo-custom-btn">
              <BodyM className="bold-text">Смотреть демо</BodyM>
            </button>
          </a>
        </div>
      </Cell>
    </Grid>
  </div>
  <div className="navigation-footer">
    <div className="controls">
      <a href="/pmef_2026">
        <button className="button icon-button secondary">
          <i className="icon home-icon" />
        </button>
      </a>
      <BackButton className="button secondary">
        <i className="icon arrow-left-icon" />
        <BodyM className="bold-text">Назад</BodyM>
      </BackButton>
      <a href="/pmef_2026/ai-platforms">
        <button className="button secondary">
          <BodyM className="bold-text">ИИ-платформы</BodyM>
        </button>
      </a>
      <a href="/pmef_2026/business-solutions">
        <button className="button secondary">
          <BodyM className="bold-text">Решения для бизнеса и государства</BodyM>
        </button>
      </a>
    </div>
  </div>
</div>