.grey-text-section {
    width: 100%;
    background-color: var(--grey-5);
}

.grey-text-section-wrapper {
    width: 100%;
    max-width: 1208px;
    margin: 0 auto;
    padding: 60px 20px 50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

@media (min-width: 840px) {
    .grey-text-section-wrapper {
        padding: 114px 20px 104px;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }
}

@supports (padding: max(0px)) {

    .grey-text-section-wrapper {
        padding: 60px calc(var(--sar) + 20px) 50px calc(var(--sal) + 20px);
    }
    
    @media (min-width: 840px) {
        .grey-text-section-wrapper {
            padding: 114px calc(var(--sar) + 20px) 104px calc(var(--sal) + 20px);
        }
    }
}

.grey-text-section h2 {
    width: 100%;
    max-width: 554px;
    margin-right: 90px;
    margin-bottom: var(--toRem22px);
}

.grey-text-section p {
    width: 100%;
    max-width: 482px;
    margin-right: 42px;
    margin-bottom: 0;
    font-size: var(--toRem20px);
    font-family: var(--roboto);
    color: var(--grey-3);
}

@media (min-width: 840px) {
    .grey-text-section p {
      margin-top: 3px;
      font-size: var(--toRem22px);
      line-height: var(--toRem32px);
    }
}