.poll { margin-bottom: 59px; &__wrapper { padding: 23px 31px 28px; background-color: @color-dark-blue; } &__topic { margin-bottom: 14px; } &__topic-wrapper { display: flex; justify-content: space-between; align-items: center; } &__topic-title { padding: 0 8px; letter-spacing: 0.08em; white-space: nowrap; text-transform: uppercase; color: rgba(@color-white, .5); font: 700 12px/17px @font-main; } &__topic-line { .size(100%, 1px); flex-grow: 1; background-color: rgba(@color-white, .5); } &__title { margin-bottom: 32px; font: 700 18px/26px @font-main; color: @color-white; text-align: center; } } @media @media-sm { .poll { margin-bottom: 24px; &__wrapper { padding: 20px 16px; } } } .poll_small { position: relative; margin-bottom: 0; height: 402px; .poll { &__wrapper { padding: 23px 28px 22px 21px; height: 100%; } &__first { position: absolute; left: 0; right: 0; bottom: 0; top: 46px; background-color: @color-dark-blue; z-index: 10; } &__topic { margin-bottom: 6px; } } } .poll-first { height: 100%; padding: 0 28px 30px; &__title { margin-top: 96px; margin-bottom: 39px; min-height: 105px; text-align: center; font: 24px/34px @font-main; color: @color-white; } &__actions { display: flex; justify-content: center; margin-bottom: 21px; } &__result { text-align: center; font: 14px/20px @font-main; color: @color-white; } } .poll-second { &__title { display: flex; align-items: flex-end; text-align: center; margin-bottom: 44px; min-height: 107px; font: 24px/34px @font-main; color: @color-white; } } .poll-form { &__list { display: flex; flex-wrap: wrap; margin: 0 -26.5px; } &__item { flex: 0 1 33.33333333%; max-width: 33.33333333%; padding: 0 26.5px; margin-bottom: 18px; } &__actions { display: flex; justify-content: center; } } @media @media-sm { .poll-form { &__list { margin: 0 -10px; } &__item { flex: 0 1 50%; max-width: 50%; padding: 0 10px; margin-bottom: 20px; } } } @media @media-xs { .poll-form { &__list { margin: 0 0 24px 0; } &__item { flex: 0 1 100%; max-width: 100%; padding: 0; margin-bottom: 20px; } } } .poll-form_columns { .poll-form { &__list { display: block; margin-bottom: 17px; } &__item { margin-bottom: 0; max-width: none; &:not(:last-child) { margin-bottom: 22px; } } &__votes { display: none; padding-left: 40px; font: 14px/18px @font-main; color: @color-white; } &__radio { &.disabled { .radio { pointer-events: none; } } } } .radio__text { font: 700 18px/23px @font-main; } } @media @media-xs { .poll-form_columns { .radio__text { font: 700 15px/20px @font-main; } .poll-form { &__votes { padding-left: 0; } } } }