.about__box--ak, .role__item { justify-content: center; align-items: center; display: flex; } .role, .about__text-list, .projects__container, .project, .recent-projects__container { flex-direction: column; display: flex; } .role__list, .about__row, .projects__box-wrap, .projects__list, .hero__box-wrap { flex-wrap: wrap; display: flex; } .about__box { position: relative; } .project__img { transition: var(--transition--300, 0.3s linear); } .about__row, .projects__box-wrap, .projects__list, .hero__box-wrap { gap: var(--gap); } .about__box, .projects__box, .project, .hero__box { flex-basis: calc( (100% - var(--gap, 16px) * (var(--items, 1) - 1)) / var(--items, 1) ); width: calc( (100% - var(--gap, 16px) * (var(--items, 1) - 1)) / var(--items, 1) ); } .hero { z-index: 1; height: 488px; padding-top: calc(60px + var(--header--height)); background-color: #aeaeae; padding-bottom: 60px; position: relative; } .hero__img-bg { z-index: -1; object-fit: cover; object-position: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .hero__title { letter-spacing: -3.9px; margin-bottom: 16px; font-size: 62px; font-weight: 500; line-height: 64px; } .hero__subtitle { letter-spacing: -1.4px; font-size: 22px; font-weight: 500; line-height: 24px; } .hero__logo { object-fit: contain; flex-shrink: 0; } .about { background-color: #fff; padding: 60px 0; } @media (min-width: 768px) { .about { padding: 80px 0 100px; } } .about__row { --gap: 16px; } .about__row:not(:last-of-type) { margin-bottom: 40px; } @media (min-width: 1024px) { .about__row { --gap: 40px; } .about__row:not(:last-of-type) { margin-bottom: 80px; } } .about__box--right { margin-left: auto; } .about__box--ak { background-color: #f5f5f5; } .about__box--ak-1 { padding: 8px; } .about__box--ak-2 { padding: 40px; } @media (min-width: 768px) { .about__box--50 { --items: 2; } } .about__box-title { letter-spacing: -1.5px; font-size: 30px; font-weight: 700; line-height: 120%; } .about__box-title--1 { margin-bottom: 24px; } .about__box-title--2 { margin-bottom: 24px; font-size: 24px; font-weight: 500; } @media (min-width: 1024px) { .about__box-title { font-size: 44px; } .about__box-title--1 { font-size: 30px; } } @media (min-width: 1440px) { .about__box-title { font-size: 55px; } .about__box-title--1 { font-size: 36px; } } .about__box-subtitle { letter-spacing: -0.4px; padding-left: 14px; font-size: 18px; font-weight: 300; line-height: 28px; position: relative; } .about__box-subtitle:before { content: ""; background: #ff5b14; border-radius: 50%; flex-shrink: 0; width: 6px; height: 6px; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .about__title { margin-bottom: 30px; font-size: 32px; font-weight: 500; } .about__link { color: #000; letter-spacing: -0.99px; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; text-underline-offset: auto; text-underline-position: from-font; font-family: Graphik LCG; font-size: 15.714px; font-style: normal; font-weight: 500; line-height: 118%; text-decoration-line: underline; text-decoration-style: solid; text-decoration-thickness: auto; } .role { gap: 8px; margin-bottom: 32px; } .role__title { color: #191b1d99; font-size: 16px; } .role__list { gap: 8px; } .role__item { background: #fff; border: 1px solid #000; border-radius: 32px; height: 32px; padding: 8px 16px; font-size: 16px; font-weight: 500; } .about__img, .about__video { object-fit: cover; width: 100%; height: auto; } .about__video--ak-1 { object-fit: contain; } .about__video--ak-2 { object-fit: contain; max-height: 440px; } .about__video--ak-3 { max-height: 80vh; } .about__text { letter-spacing: -0.69px; font-size: 18px; line-height: 144%; } .about__text-list { gap: 8px; } .about__text-item { padding-left: 20px; font-weight: 500; position: relative; } .about__text-item:before { content: ""; background-color: currentColor; border-radius: 50%; width: 6px; height: 6px; display: block; position: absolute; top: 5px; left: 4px; } .projects__container { gap: 50px; } .projects__box-wrap { --gap: 32px; } @media (min-width: 768px) { .projects__box--50 { --items: 2; } } .projects__list { --gap: 64px; } .project { gap: 24px; } @media (min-width: 768px) { .project--50 { --items: 2; } } .project__title { letter-spacing: 0.14px; margin-bottom: 16px; font-size: 22px; font-weight: 600; line-height: 108%; } .project__text { color: #19191980; letter-spacing: 0.115px; line-height: 130.5%; } .project__img-wrap { overflow: hidden; } .project__img { object-fit: cover; width: 100%; height: 240px; } .project__link--rotate:hover .project__img, .project__link--rotate:focus .project__img { transform: scale(1.15) rotate(2deg); } @media (min-width: 1024px) { .project__img { height: 320px; } .project--100 .project__img { height: 480px; } } @media (min-width: 1440px) { .project__img { height: 425px; } .project--100 .project__img { height: 528px; } } .recent-projects { padding: 60px 0; } @media (min-width: 768px) { .recent-projects { padding: 80px 0 100px; } } .recent-projects__container { gap: 24px; } .recent-projects__cta-btn { width: fit-content; margin-left: auto; } .hero { background: linear-gradient(-116deg, #a2e67f 1.4%, #39d8c1 111.15%); margin-bottom: 60px; } @media (min-width: 768px) { .hero__box-wrap { --gap: 40px; --items: 2; } .hero__box { position: relative; } } .hero__logo { flex-shrink: 0; width: 239px; height: 82px; } .hero__img { object-fit: cover; object-position: right; aspect-ratio: 4/3; width: 101%; max-width: none; height: 220px; } @media (min-width: 600px) and (max-width: 767px) { .hero__img { object-position: top 40% right 0px; } } @media (max-width: 767px) { .hero__img { width: 101%; max-width: none; position: absolute; bottom: 0; left: -2px; } } @media (min-width: 768px) { .hero__img { max-width: 650px; height: 420px; } } .hero__img--center { display: none; } @media (min-width: 768px) { .hero__img--center { width: 180px; display: block; position: absolute; top: 80px; left: -90px; } } @media (min-width: 1024px) { .hero__img--center { width: 200px; top: 42px; left: -100px; } } .header { color: var(--color-dark); border-bottom: 1px solid #ffffff3d; } .header.header--dark { color: #fff; }