/* Wrapper */

.wrapper {

margin-bottom: 5em;
padding: 5em;

&.style1 {
    padding: 0;
}

&.style2 {
    background-color: _palette(one, bg);
    background-image: url('images/light-bl.svg'), url('images/light-br.svg');
    background-position: bottom left, bottom right;
    background-repeat: no-repeat, no-repeat;
    background-size: $pattern-background-size, $pattern-background-size;
    color: _palette(one, fg);

    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    button,
    .button {
        &:hover {
            background: rgba(255,255,255,0.15) !important;
        }

        &.primary {
            background: _palette(one, fg);
            border-color: _palette(one, fg);
            color: _palette(one, bg) !important;

            &:hover {
                border-color: inherit !important;
                color: _palette(one, fg) !important;
            }
        }
    }
}

&.style3 {
    background: _palette(two, bg);
    color: _palette(two, fg);
}

&.style4 {
    background: _palette(two, bg);
    color: _palette(two, fg);
    padding: 4em;
}

}