.wrapper-lp {
    position: relative;

    width: 1248px;
    margin: 0 auto;
}

@media only screen and (max-width: 1310px) {
    .wrapper-lp {
        width: 100%;
        padding: 0 30px;
    }
}

/* ----- typography ----- */
.text_decor_1 {
    letter-spacing: var(--cs_letter-spacing_xxxl);

    font-size: var(--font_decor_1_font_size);
    font-weight: var(--cs-font_weight--black);
    line-height: var(--cs_line-height_s);
}

@media only screen and (max-width: 460px) {
    .text_decor_1 {
        font-size: var(--font_decor_1_mobile_font_size);
    }
}

@media only screen and (max-width: 425px) {
    .text_decor_1 {
        font-size: var(--font_decor_1_mobile-small_font_size);
    }
}

.text_decor_2 {
    letter-spacing: var(--font_letter-spacing_xxl);

    font-size: var(--font_decor_2_font_size);
    font-weight: var(--cs-font_weight--black);
    line-height: var(--cs_line-height_s);
}

@media only screen and (max-width: 460px) {
    .text_decor_2 {
        font-size: var(--font_decor_2_mobile_font_size);
    }
}

.text_decor_3 {
    letter-spacing: var(--cs_letter-spacing_xxl);

    font-size: var(--font_decor_3_font_size);
    font-weight: var(--cs-font_weight--black);
    line-height: var(--cs_line-height_s);
}

@media only screen and (max-width: 460px) {
    .text_decor_3 {
        font-size: var(--font_decor_3_mobile_font_size);
    }
}

@media only screen and (max-width: 400px) {
    .text_decor_3 {
        font-size: var(--font_decor_3_small_mobile_font_size);
    }
}

.text_decor_4 {
    letter-spacing: var(--cs_letter-spacing_s);

    font-family: var(--cs_font_family_quote);
    font-size: var(--font_decor_4_font_size);
    font-weight: var(--cs-font_weight--regular);
    line-height: var(--cs_line-height_xl);
}

@media only screen and (max-width: 460px) {
    .text_decor_4 {
        font-size: var(--font_decor_4_mobile_font_size);
    }
}

.text_heading_1 {
    letter-spacing: var(--cs_letter-spacing_xl);

    font-size: var(--font_heading_1_font_size);
    font-weight: var(--cs-font_weight--bold);
    line-height: var(--cs_line-height_m);
}

@media only screen and (max-width: 460px) {
    .text_heading_1 {
        font-size: var(--font_heading_1_mobile_font_size);
    }
}

.text_heading_2 {
    letter-spacing: var(--cs_letter-spacing_l);

    font-size: var(--font_heading_2_font_size);
    font-weight: var(--cs-font_weight--bold);
    line-height: var(--cs_line-height_l);
}

@media only screen and (max-width: 460px) {
    .text_heading_2 {
        font-size: var(--font_heading_2_mobile_font_size);
    }
}

.text_heading_3 {
    letter-spacing: var(--cs_letter-spacing_m);

    font-size: var(--font_heading_3_font_size);
    font-weight: var(--cs-font_weight--bold);
    line-height: var(--cs_line-height_l);
}

@media only screen and (max-width: 460px) {
    .text_heading_3 {
        font-size: var(--font_heading_3_mobile_font_size);
    }
}

.text_heading_4 {
    letter-spacing: var(--cs_letter-spacing_m);

    font-size: var(--font_heading_4_font_size);
    font-weight: var(--cs-font_weight--bold);
    line-height: var(--cs_line-height_s);
}

@media only screen and (max-width: 460px) {
    .text_heading_4 {
        font-size: var(--font_heading_4_mobile_font_size);
    }
}

.text_heading_5 {
    letter-spacing: var(--cs_letter-spacing_xs);

    font-size: var(--font_heading_5_font_size);
    font-weight: var(--cs-font_weight--bold);
    line-height: var(--cs_line-height_s);
}

@media only screen and (max-width: 460px) {
    .text_heading_5 {
        font-size: var(--font_heading_5_mobile_font_size);
    }
}

.text_heading_6 {
    letter-spacing: var(--cs_letter-spacing_xs);

    font-size: var(--font_heading_6_font_size);
    font-weight: var(--cs-font_weight--bold);
    line-height: var(--cs_line-height_s);
}

@media only screen and (max-width: 460px) {
    .text_heading_6 {
        font-size: var(--font_heading_6_mobile_font_size);
    }
}

.text_body {
    font-size: var(--font_body_font_size);
    font-weight: var(--cs-font_weight--light);
    line-height: var(--cs_line-height_xxl);
}

@media only screen and (max-width: 460px) {
    .text_body {
        font-size: var(--font_body_mobile_font_size);
    }
}

.text_body_small {
    font-size: var(--font_body_small_font_size);
    font-weight: var(--cs-font_weight--light);
    line-height: var(--cs_line-height_xl);
}

@media only screen and (max-width: 460px) {
    .text_body_small {
        font-size: var(--font_body_small_mobile_font_size);
    }
}

.button_text {
    font-size: var(--font_button_font_size);
    font-weight: var(--cs-font_weight--semibold);
    line-height: var(--cs_line-height_l);
}

@media only screen and (max-width: 460px) {
    .button_text {
        font-size: var(--font_button_mobile_font_size);
    }
}

/* ----- buttons ----- */
.lp-button-cta {
    display: inline-block;

    padding: 16px 20px;

    transition: all var(--translation_duration);
    letter-spacing: var(--cs_letter-spacing_xs);

    font-size: var(--font_button_font_size);
    font-weight: var(--cs-font_weight--semibold);
    line-height: var(--cs_line-height_l);
}

@media only screen and (max-width: 460px) {
    .lp-button-cta {
        font-size: var(--font_button_mobile_font_size);
    }
}

.lp-cta-primary {
    color: var(--white);
    background-color: var(--red);
}

.lp-cta-primary:hover {
    color: var(--white);
    background-color: var(--red--dark);
}

.lp-cta-arrow .arrow--right {
    display: inline-block;

    margin-left: 16px;

    transition: all var(--translation_duration);
}

.lp-cta-arrow:hover .arrow--right {
    transform: translateX(5px);
}

.lp-cta-secondary {
    display: inline-block;

    color: var(--color_blue_600);

    font-size: var(--font_button_font_size);
    font-weight: var(--cs-font_weight--semibold);
    line-height: var(--cs_line-height_l);
}

@media only screen and (max-width: 460px) {
    .lp-cta-secondary {
        font-size: var(--font_button_mobile_font_size);
    }
}

.lp-cta-secondary:hover {
    color: var(--color_blue_600);
}

.lp-cta-secondary:after {
    position: absolute;
    top: unset;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 2px;

    content: '';
    transition: all var(--translation_duration);

    background: var(--color_blue_600);
}

.lp-cta-secondary:hover:after {
    width: 50%;
}