.hero__container, .hero__box-wrap, .hero__desc { flex-direction: column; display: flex; } .hero { padding-top: calc(60px + var(--header--height)); color: var(--color-dark); background-color: var(--color-gray); padding-bottom: 60px; } @media (min-width: 1024px) { .hero { padding-top: calc(40px + var(--header--height)); padding-bottom: 120px; } } .hero__container { --gap: 20px; gap: var(--gap); } @media (min-width: 1024px) { .hero__container { --gap: 68px; } } .hero__box-wrap { gap: var(--gap); } @media (min-width: 768px) { .hero__box-wrap { flex-direction: row; justify-content: space-between; } } .hero__box { flex: 0 0 calc((100% - var(--gap)) / 2); } .hero__title { letter-spacing: -1.6px; max-width: 580px; font-size: 48px; font-weight: 500; line-height: 110%; } .hero__title span { color: #fff; } @media (min-width: 1024px) { .hero__title { margin-bottom: auto; } } .hero__subtitle { letter-spacing: -1.4px; font-size: 22px; font-weight: 500; line-height: 111.5%; } .hero__subtitle span { color: #fff; } .hero__video { width: 100%; height: auto; } .hero__desc { gap: 24px; margin-top: 32px; } .hero__text, .hero__text--black { letter-spacing: -1.2px; color: var(--color--dark-80); font-size: 19px; line-height: 27px; } .hero__text--black { font-weight: 600; } .header { color: var(--color-dark); } .header.header--dark { color: #fff; }