| .innerhero__pic--hadoop { |
| width: auto; |
| height: auto; |
| top: auto; |
| bottom: -11rem; |
| transform: none; |
| left: 73%; |
| } |
| |
| .doop2__block { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| grid-gap: 8rem; |
| grid-auto-rows: auto; |
| } |
| .doop2__grid { |
| flex-direction: column; |
| margin-top: 0; |
| } |
| |
| .doop2__item:last-child { |
| margin-left: 0; |
| margin-top: 5.5rem; |
| } |
| .doop3 { |
| padding-top: 13rem; |
| padding-bottom: 13rem; |
| } |
| .doop3__image { |
| background: #f6f6f6; |
| border-radius: 20px; |
| padding: 6.7rem 7.8rem; |
| } |
| .doop3__h2 { |
| font-weight: bold; |
| } |
| .doop3__block { |
| justify-content: space-between; |
| } |
| .doop3__info { |
| max-width: 543px; |
| margin-right: 10rem; |
| } |
| .doop3__text { |
| margin-top: 2rem; |
| margin-bottom: 5rem; |
| } |
| .doop3__number { |
| color: #0070cc; |
| font-weight: bold; |
| margin-top: 3rem; |
| margin-bottom: 1rem; |
| font-size: 2rem; |
| } |
| .doop4__h2 { |
| max-width: 650px; |
| } |
| .doop4 { |
| padding-bottom: 13rem; |
| } |
| .doop4__block { |
| margin-top: 5rem; |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| grid-gap: 7rem; |
| grid-auto-rows: auto; |
| } |
| .doop4__grey { |
| color: #9c9c9c; |
| } |
| .doop4__item { |
| max-width: 580px; |
| } |
| .doop5__item { |
| border: 1px solid #e6e6e6; |
| border-radius: 10px; |
| height: 230px; |
| padding-top: 2.2rem; |
| padding-left: 3.7rem; |
| padding-right: 3rem; |
| background: url("../img/usecases/hadoop/blue.svg"); |
| background-repeat: no-repeat; |
| background-position-y: 2rem; |
| } |
| .doop5__block { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| grid-template-areas: |
| "post1 post2 post3" |
| "post4 post5 post5"; |
| |
| grid-gap: 3rem; |
| grid-auto-rows: auto; |
| margin-top: 5rem; |
| } |
| |
| .doop5__title { |
| max-width: 290px; |
| font-weight: bold; |
| } |
| .doop5__number { |
| margin-bottom: 1.5rem; |
| } |
| .doop5__text { |
| max-width: 316px; |
| } |
| .doop5__titleend { |
| font-weight: bold; |
| max-width: 476px; |
| margin-bottom: 2rem; |
| } |
| .doop5__middle { |
| margin-left: 2rem; |
| margin-right: 4rem; |
| } |
| |
| .post1 { |
| grid-area: post1; |
| } |
| .post2 { |
| grid-area: post2; |
| } |
| .post3 { |
| grid-area: post3; |
| } |
| .post4 { |
| grid-area: post4; |
| } |
| .post5 { |
| grid-area: post5; |
| } |
| |
| @media (max-width: 1199px) { |
| .innerhero__pic--hadoop { |
| width: 40rem; |
| } |
| .doop2__block { |
| grid-gap: 2rem; |
| } |
| .doop3 { |
| padding-top: 8rem; |
| padding-bottom: 8rem; |
| } |
| .doop3__text { |
| margin-bottom: 4rem; |
| } |
| .doop3__image { |
| width: 50%; |
| padding: 4rem; |
| } |
| .doop4 { |
| padding-bottom: 8rem; |
| } |
| .doop4__block { |
| margin-top: 4rem; |
| grid-gap: 5rem; |
| } |
| .doop5__block { |
| margin-top: 4rem; |
| } |
| } |
| |
| @media (max-width: 992px) { |
| .doop3__image { |
| padding: 3rem; |
| } |
| } |
| |
| @media (max-width: 767px) { |
| .doop2__block { |
| grid-template-columns: 1fr; |
| grid-gap: 3rem; |
| } |
| .doop2__item:last-child { |
| margin-top: 3rem; |
| } |
| .doop3 { |
| padding-top: 6rem; |
| padding-bottom: 6rem; |
| } |
| .doop3__block { |
| flex-direction: column; |
| } |
| .doop3__info { |
| margin-right: 0; |
| max-width: 100%; |
| } |
| .doop3__image { |
| width: 100%; |
| margin-top: 3rem; |
| } |
| .doop3__number { |
| margin-top: 2rem; |
| } |
| .doop3__text { |
| margin-bottom: 3rem; |
| } |
| .doop4 { |
| padding-bottom: 6rem; |
| } |
| .doop4__block { |
| grid-template-columns: 1fr; |
| grid-gap: 2rem; |
| margin-top: 3rem; |
| } |
| .doop4__h2 { |
| max-width: 100%; |
| } |
| .doop5__block { |
| display: flex; |
| flex-direction: column; |
| grid-gap: 2rem; |
| grid-auto-rows: auto; |
| margin-top: 3rem; |
| } |
| .doop5__title { |
| max-width: 100%; |
| } |
| .doop5__text { |
| max-width: 100%; |
| } |
| .doop5__item { |
| height: auto; |
| padding: 3rem 4rem; |
| } |
| .doop5__part { |
| flex-direction: column; |
| } |
| .doop5__middle { |
| margin-left: 0; |
| margin-right: 0; |
| margin-top: 1.5rem; |
| margin-bottom: 1.5rem; |
| } |
| .doop5__titleend { |
| max-width: 100%; |
| } |
| } |