.contentRender_name_plugins_common_newsletter_banner {
    position: relative;
    margin: 55px 0 55px;

    .banner-container {
        position: relative;
        display: block;
        max-width: 100%;
        width: 100%;
        height: 266px;
        background: var(--dark-green);
        margin: 0 auto;
        overflow: hidden;
        z-index: 2;

        &::before {
            content: '';
            background: right / contain no-repeat url(/includes/public/assets/shared/decorations/social-bg.svg);
            height: 264px;
            width: 264px;
            position: absolute;
            bottom: -120px;
            left: -132px;
            pointer-events: none;
            z-index: 1;
        }

        .banner-inner {
            display: grid;
            justify-items: center;
            grid-template-columns: repeat(1, 1fr);
            width: 100%;
            height: 100%;

            .content-container {
                display: grid;
                max-width: 320px;
                width: 100%;
                height: 100%;
                padding: 30px 20px 12px 15px;

                .title {
                    /* display: grid; */
                    width: 100%;
                    font-family: var(--font-meshed-med);
                    font-weight: 500;
                    font-size: 2rem;
                    line-height: 1.02;
                    letter-spacing: -0.01em;
                    color: var(--gold);
                    margin: 0;

                    > i {
                        font-family: var(--font-meshed-medslanted);
                    }
                }

                .desc {
                    width: 100%;
                    font-family: var(--font-inter);
                    font-weight: 400;
                    font-size: 1rem;
                    line-height: 1.5;
                    letter-spacing: -0.01em;
                    color: var(--white);
                }
            }

            .subscribe-btn {
                display: grid;
                align-items: end;
                width: 320px;
                max-height: 55px;
                padding: 0 15px;
                z-index: 2;

                .subscribe {
                    display: block;
                    width: 100%;
                    color: var(--white);
                    border: 2px solid rgba(255, 255, 255, 0.75);
                    padding: 15px 0 15px 27px;
                    background: url(/includes/public/assets/shared/arrows/arrow_right_white.svg) no-repeat center right 22px var(--dark-green);
                    font-family: var(--font-inter);
                    font-weight: 600;
                    font-size: 1.125rem;
                    line-height: 1.21;
                }

                .subscribe:hover {
                    background: url(/includes/public/assets/shared/arrows/arrow_right_dark_green.svg) no-repeat center right 22px var(--gold);
                    color: var(--dark-green);
                    border: 2px solid var(--gold);
                }
            }

            .banner-image {
                display: none;
            }
        }
    }
}

@media (min-width: 40em) {
    .contentRender_name_plugins_common_newsletter_banner {
        .banner-container {
            height: 300px;

            &::before {
                content: '';
                background: right / contain no-repeat url(/includes/public/assets/shared/decorations/social-bg.svg);
                height: 585px;
                width: 585px;
                position: absolute;
                bottom: -290px;
                left: -290px;
                pointer-events: none;
                z-index: 1;
            }

            .banner-inner {
                display: flex;
                align-items: center;

                .content-container {
                    align-content: space-between;
                    max-width: 100%;
                    padding: 40px 0 40px 20px;

                    .title {
                        max-width: 485px;
                        font-size: 3.75rem;
                    }

                    .desc {
                        width: 420px;
                        line-height: 1.63;
                    }
                }

                .subscribe-btn {
                    width: 100%;
                    max-height: 87px;

                    .subscribe {
                        width: 290px;
                        padding: 20px 60px 20px 27px;
                        font-size: 1.313rem;
                        background-position: center right 28px;
                    }

                    .subscribe:hover {
                        background-position: center right 28px;
                    }
                }
            }
        }
    }
}

@media (min-width: 64em) {
    .contentRender_name_plugins_common_newsletter_banner {
        .banner-container {
            max-width: 1250px;
            height: 300px;

            .banner-inner {
                align-items: end;

                .content-container {
                    padding: 20px 0 20px 25px;

                    .title {
                        margin: 0 0 20px;
                    }
                }

                .subscribe-btn {
                    display: flex;
                    justify-content: center;
                    padding: 0 0 55px 25px;
                }

                .banner-image {
                    display: flex;

                    img {
                        max-width: unset;
                    }
                }
            }
        }
    }
}

@media (min-width: 90em) {
    .contentRender_name_plugins_common_newsletter_banner {
        .banner-container {
            .banner-inner {
                .content-container {
                    padding: 60px 0 60px 75px;
                }
            }
        }
    }
}