section.newsletter {
    margin-top: 1.8rem;
    margin-bottom: 1.4rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
    section.newsletter {
        margin-top: 0.6rem;
        margin-bottom: 0.6rem;
}
    }
@media screen and (max-width: 768px) and (orientation: portrait) {
    section.newsletter .container {
            padding: 0;
    }
        }
section.newsletter .wrapper {
        position: relative;
        overflow: hidden;
        padding: 1.4rem 1rem;
        border-radius: 0.48rem;

        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
@media screen and (max-width: 768px) and (orientation: portrait) {
    section.newsletter .wrapper {
            padding: 0.8rem 0.16rem;
            border-radius: 0;
    }
        }
:is(section.newsletter .wrapper) .extra-wrap {
            width: 6.2rem;
            position: relative;
            z-index: 2;
        }
@media screen and (max-width: 768px) and (orientation: portrait) {
    :is(section.newsletter .wrapper) .extra-wrap {
                width: 100%;
        }
            }
.light-blue:is(section.newsletter .wrapper) {
            background-color: var(--light-blue);
            color: var(--blue);
        }
:is(.light-blue:is(section.newsletter .wrapper) .btn) .btn-icon-content {
                    background-color: var(--blue);
                    color: var(--light-blue);
                }
:is(.light-blue:is(section.newsletter .wrapper) .btn) .btn-icon-icon__bg {
                    background-color: var(--light-blue);

                }
:is(:is(:is(.light-blue:is(section.newsletter .wrapper) .btn) .btn-icon-icon__wrap) svg) path {
                            fill: var(--blue);
                        }
.yellow:is(section.newsletter .wrapper) {
            background-color: var(--yellow);
            color: var(--red);
        }
:is(.yellow:is(section.newsletter .wrapper) .btn) .btn-icon-content {
                    background-color: var(--red);
                    color: var(--yellow);
                }
:is(.yellow:is(section.newsletter .wrapper) .btn) .btn-icon-icon__bg {
                    background-color: var(--yellow);

                }
:is(:is(:is(.yellow:is(section.newsletter .wrapper) .btn) .btn-icon-icon__wrap) svg) path {
                            fill: var(--red);
                        }
.yellow:is(section.newsletter .wrapper) input {
                color: var(--red) !important;
            }
:is(.yellow:is(section.newsletter .wrapper) input)::placeholder {
                    color: var(--red) !important;
                }
/* Only the decorative background SVG is a direct child of .wrapper; arrow SVGs live inside .btn */
:is(section.newsletter .wrapper)  > svg {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: auto;
            height: 100%;
            z-index: 1;
        }
:is(section.newsletter .wrapper) .description {
            margin-top: 0.24rem;
        }
:is(section.newsletter .wrapper) .button-wrap {
            display: flex;
            justify-content: center;
            margin-top: 0.7rem;
        }
@media screen and (max-width: 768px) and (orientation: portrait) {
    :is(section.newsletter .wrapper) .button-wrap {
                margin-top: 0.56rem;
        }
            }
:is(section.newsletter .wrapper) .form-wrap {
            margin-top: 0.56rem;
        }
:is(:is(section.newsletter .wrapper) .form-wrap) .validation_message {
                display: none;
            }
:is(:is(section.newsletter .wrapper) .form-wrap) form {
                display: flex;
                align-items: center;
                justify-content: center;
            }
:is(:is(:is(section.newsletter .wrapper) .form-wrap) form) .gform-footer {
                    padding: 0;
                    margin: 0;
                    margin-left: -0.5rem;
                }
:is(:is(:is(:is(section.newsletter .wrapper) .form-wrap) form) .gform-footer) button {
                        border: none;
                        padding: 0;
                        font-family: inherit;
                        cursor: pointer;
                        margin-bottom: 0;
                    }
:is(:is(:is(section.newsletter .wrapper) .form-wrap) form) input {
                    border-radius: 9rem;
                    border: none;
                    padding: .13rem 0.24rem;
                    font-family: "Schibsted Grotesk", sans-serif;
                    font-size: 0.16rem;
                    line-height: 1.1 !important;
                    font-weight: 500;
                    color: var(--blue);

                    width: 3.4rem !important;
            
                }
:is(:is(:is(:is(section.newsletter .wrapper) .form-wrap) form) input)::placeholder {
                        color: var(--blue);
                    }
@media screen and (max-width: 768px) and (orientation: portrait) {
    :is(:is(:is(section.newsletter .wrapper) .form-wrap) form) input {
                        width: 100% !important;
            
                }
                    }