.sug_warpper {
    position  : relative;
    background: white;
    width     : 100%;
    padding   : 40px 0 40px 0;
    min-width : 280px;
}

.sug_warpper_inverted_l {
    background: linear-gradient(120deg, #0057ff, #c770ff);
}

.sug_warpper_inverted_r {
    background: linear-gradient(120deg, #c770ff, #0057ff);
}

.sug_holder {
    position       : relative;
    margin         : 0 auto 0 auto;
    width          : 984px;
    padding        : 0px 20px 0px 20px;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
}

.sug_headline {
    position     : relative;
    text-align   : center;
    color        : #0057FF;
    margin-bottom: 6px;
}

.sug_headline_inverted {
    color: #B2CCFF
}

.sug_subline {
    text-align   : center;
    font-size    : 20px;
    color        : #424242;
    margin-bottom: 40px;
}

.sug_subline_inverted {
    color: white;
}

.sug_text {
    position     : relative;
    text-align   : center;
    font-size    : 15px;
    color        : #898989;
    margin-bottom: 30px;
}

.sug_text_inverted {
    color: #e0e0e0;
}

.sug_bt {
    position     : relative;
    max-width    : 280px;
    color        : #424242;
    border       : 2px solid #424242;
    transition   : ease 0.3s;
    font-size    : 16px;
    background   : transparent;
    opacity      : 0.6;
    padding      : 6px 20px 6px 20px;
    border-radius: 10px;
    box-sizing   : content-box;
}

.sug_bt_inverted {
    color     : white;
    border    : 2px solid white;
    box-sizing: content-box;
}

.sug_bt:active {
    opacity         : 1;
    background-color: #424242;
    color           : white;
}

.sug_bt_inverted:active {
    opacity         : 1;
    background-color: white;
    color           : #0057FF;
}

@media(hover:hover) and (pointer:fine) {
    .sug_bt:hover {
        opacity         : 1;
        background-color: #424242;
        color           : white;
    }

    .sug_bt_inverted:hover {
        opacity         : 1;
        background-color: white;
        color           : #0057FF;
    }
}

@media (max-width:1024px) and (min-width:0),
(max-width:1024px) and (min-device-width:0) {
    .sug_warpper {
        width  : calc(100% - 40px);
        padding: 40px 20px 40px 20px;
    }

    .sug_holder {
        width  : 100%;
        padding: 0;
    }
}