| .innerhero__pic--computeapis { |
| width: 107rem; |
| height: auto; |
| top: auto; |
| bottom: -11rem; |
| transform: none; |
| left: 41%; |
| } |
| .with-apache { |
| font-weight: normal; |
| } |
| .compute1 { |
| padding-top: 9rem; |
| padding-bottom: 13rem; |
| } |
| |
| .compute1__h2 { |
| max-width: 700px; |
| padding-bottom: 2rem; |
| } |
| .compute1__deskr { |
| font-size: 2rem; |
| line-height: 1.6; |
| } |
| .compute1__block { |
| padding-top: 7rem; |
| } |
| .compute1__item { |
| padding: 3.5rem 8rem 4rem 3.3rem; |
| background: #f6f6f6; |
| max-width: 402px; |
| border-radius: 10px; |
| max-height: 187px; |
| } |
| .compute1__item:first-child { |
| margin-right: 3rem; |
| } |
| .compute1__text { |
| line-height: 1.4; |
| margin-top: 2.4rem; |
| min-width: 289px; |
| } |
| |
| .compute2 { |
| padding-top: 8rem; |
| padding-bottom: 10rem; |
| background: #e8f2fa; |
| } |
| .compute2__h2 { |
| letter-spacing: 2px; |
| text-transform: uppercase; |
| font-weight: normal; |
| font-size: 1.6rem; |
| line-height: 1.4; |
| } |
| .compute2-points__item::before { |
| content: ""; |
| display: block; |
| width: 24px; |
| height: 24px; |
| left: 3rem; |
| top: 3.5rem; |
| background: url(../img/features/icon-check-ok.svg) no-repeat; |
| background-size: contain; |
| } |
| .compute2item__block { |
| margin-left: 1rem; |
| } |
| .compute2__grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| grid-gap: 3rem; |
| grid-auto-rows: auto; |
| margin-top: 5rem; |
| } |
| .compute2item { |
| position: relative; |
| max-width: 300px; |
| display: flex; |
| } |
| |
| .compute2__text { |
| font-size: 1.6rem; |
| line-height: 1.4; |
| margin-top: 2.4rem; |
| } |
| |
| pre code.hljs { |
| display: block; |
| overflow-x: auto; |
| padding: 1em; |
| } |
| |
| .compute3 { |
| padding-top: 13rem; |
| padding-bottom: 3rem; |
| } |
| .compute3__h2 { |
| max-width: 700px; |
| margin-top: 5rem; |
| margin-bottom: 2rem; |
| } |
| .compute3__text { |
| max-width: 800px; |
| font-size: 2rem; |
| line-height: 1.6; |
| } |
| |
| .compute4 { |
| padding-top: 5rem; |
| justify-content: space-between; |
| align-items: stretch; |
| margin-bottom: 4rem; |
| } |
| .compute4__block { |
| width: calc(50% - 17px); |
| background: var(--blue4); |
| border-radius: 10px; |
| padding: 4rem; |
| } |
| .compute4__icon { |
| width: 32px; |
| height: 32px; |
| display: block; |
| } |
| .compute4__block--bad { |
| background: var(--red5); |
| } |
| .compute4__title { |
| max-width: 500px; |
| } |
| |
| @media (max-width: 992px) { |
| .compute1__text { |
| min-width: 30rem; |
| } |
| } |
| @media (max-width: 767px) { |
| .compute1 { |
| padding-top: 6rem; |
| padding-bottom: 8rem; |
| } |
| .compute1__block { |
| flex-direction: column; |
| padding-top: 5rem; |
| } |
| .compute1__item:first-child { |
| margin-right: 0; |
| margin-bottom: 2rem; |
| } |
| .compute1__item { |
| width: 100%; |
| } |
| .compute1__text { |
| min-width: auto; |
| } |
| .compute2 { |
| padding-top: 6rem; |
| padding-bottom: 8rem; |
| } |
| .compute2__grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .compute4 { |
| padding-top: 4rem; |
| flex-flow: column nowrap; |
| align-items: stretch; |
| } |
| .compute4__block { |
| width: 100%; |
| margin-bottom: 2rem; |
| padding: 3rem 2rem; |
| } |
| .compute4__block br { |
| display: none; |
| } |
| .compute4__icon { |
| width: 24px; |
| height: 24px; |
| } |
| } |