section { position: relative; padding-top: 5rem; padding-bottom: 3rem; box-sizing: border-box; min-height: 100vh; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background-size: 100% 30px; background-repeat: no-repeat; background-position: bottom; background-color: $background-primary; background-image: linear-gradient( to left bottom, $background-primary 49%, $background-alternative 50% ); &:nth-of-type(even) { background-color: $background-alternative; background-image: linear-gradient( to left bottom, $background-alternative 49%, $background-primary 50% ); } &:last-of-type { background-image: none; } .content { box-sizing: border-box; padding-left: 2rem; padding-right: 2rem; } .paragraphs { word-break: break-word; } .heading { h1 { word-break: break-word; } img { max-width: 100%; display: block; margin: 0 auto; } } p { max-width: 40rem; } & > p { text-align: center; padding: 2rem 1.5rem; color: $background-alternative; a { color: $background-alternative; } } @include media-breakpoint-up(sm) { padding: 4rem 0; .content { display: flex; align-items: flex-start; padding: 0 2rem; } .paragraphs { padding-left: 2rem; } .heading { width: 22rem; text-align: right; align-items: baseline; flex-direction:column; img { max-width: 100%; display: block; margin: 0 auto; } } } }