.long-form-section {
    background: rgb(var(--color-white));
    color: rgb(var(--color-gray-1));

    > .container {
        padding: var(--space-sections-xs) 0;

        > .long-form-section-item {
            scroll-margin-top: 40px;
            margin-top: var(--space-12);

            &:first-child {
                margin-top: 0;
            }

            > h2 {
                font-size: var(--font-size-ml);
                font-weight: var(--font-weight-regular);
                line-height: var(--line-height-ml);
                margin-bottom: var(--space-8);
            }

            > h3 {
                font-size: var(--font-size-m);
                font-weight: var(--font-weight-bold);
                line-height: var(--line-height-m);
                margin-top: var(--space-8);
                margin-bottom: var(--space-4);
            }

            > p {
                max-width: 100%;
                font-size: var(--font-size-m);
                font-weight: var(--font-weight-thin);
                line-height: var(--line-height-m);
                opacity: var(--opacity-700);
                white-space: pre-wrap;
            }

            > p + p {
                margin-top: var(--space-4);
            }

            > ul:not(.values-list) {
                list-style: none;
                padding-left: var(--space-5);
                margin-top: var(--space-4);

                > li {
                    position: relative;
                    font-family: var(--font-main), sans-serif;
                    font-size: var(--font-size-m);
                    font-weight: var(--font-weight-thin);
                    line-height: var(--line-height-m);
                    opacity: var(--opacity-700);
                    margin-top: var(--space-1);

                    &:first-child {
                        margin-top: 0;
                    }

                    &::before {
                        content: '';
                        position: absolute;
                        left: calc(-1 * var(--space-4));
                        top: 13px;
                        width: 5px;
                        height: 5px;
                        border-radius: 50%;
                        background-color: currentColor;
                    }
                }
            }

            > ul:not(.values-list) + p {
                margin-top: var(--space-4);
            }

            > p.long-form-section-cta {
                margin-top: var(--space-6);
                opacity: 1;

                > a {
                    color: rgb(var(--color-primary));
                    font-weight: var(--font-weight-regular);

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}

@media (max-width: 820px) {
    .long-form-section > .container {
        padding: var(--space-sections-xs) var(--space-4);
    }
}