section { min-height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; background: $body-bg; /*&:not(:first-child):before*/ &:before { content: ""; width: 100%; height: 30px; position: absolute; top: -30px; right: 0; background: linear-gradient(to left bottom, $alternate-bg 0%,$alternate-bg 49%,$body-bg 50%,$body-bg 100%); background: linear-gradient(to left bottom, transparent 0%,transparent 49%,$body-bg 50%,$body-bg 100%); } &.even { background: $alternate-bg; &:before { background: linear-gradient(to left bottom, $body-bg 0%,$body-bg 49%,$alternate-bg 50%,$alternate-bg 100%); background: linear-gradient(to left bottom, transparent 0%,transparent 49%,$alternate-bg 50%,$alternate-bg 100%); } } .paragraphs { column-count: 2; margin: 1rem 1rem 200px; h3, p { max-width: 300px; font-family: 'Roboto', sans-serif; } p + h3 { margin-top: 50px; } @media screen and (max-width: $screen-phone) { & { column-count: unset; } } } &#faq { .paragraphs { column-count: unset; } ul { list-style-type: none; li { display: block; margin: 0 300px 0 0; &:nth-child(even) { margin: 0 0 0 300px; } @media screen and (max-width: $screen-phone) { & { margin: 0 !important; } } } } } }