Hanami Mirai

Ну собственно делаешь блок с цветом фона белым (если я правильно понял какой перекрыт картинкой) и кладешь фоновую картинку по правому краю выравниваешь

Способ конечно, без кодинга, но все же, сделайте это все через Google Forms! Там есть все для опросов, от гугл. Знаю что вам нужен полностью свой сайт, но в Google Forms очень удобно настраивать страницу опроса, есть кучу вариантов, около 30. А также миллиарды аддонов. Советую!

Ну в сети куча вариантов, например такое или такое, внутри каждого блока по слайдеру.

Хотя тут обычными табами наверно можно, вариаций не так уж много

Вот моё решение: https://jsfiddle.net/zco29x5v/1/

У вас тут не с sass проблема, а с css.
.active,.burder-menu__lines - Разделяете запятой. Вот оно так и получается.
А Вам нужно что-что типа такого:

.burger-menu
  &_active &__lines
    &::after
      content: 'after'
    &::before
      content: 'before'

А ещё у Вас опечатка в burder

Такой вариант может подойти:

Разницы нет, главное, чтобы он был в head. Обычно делаю так же как вы

яб просто белый треугольник наложил бы
https://css-tricks.com/creating-non-rectangular-he...
https://css-tricks.com/working-with-shapes-in-web-...
https://bennettfeely.com/clippy/

ну или

clip-path: polygon(0 0, 100% 0%, 100% 83%, 0% 100%);

это из за .menu