@use "../base/mixins";

section.flexi-block.block--newsletter-signup-02 {
    .container {
        background-color: var(--c-l-grey);
    }

    .content {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        padding: clamp(30px, 4vw, 60px) 20px;

        h1, h2, h3 {
            font-size: clamp(2.25rem, 3vw, 4rem);
        }
    }

    .image {
        position: relative;
        overflow: hidden;
        width: 100%;
        min-height: 250px;
        height: 100%;

        img {
            @include mixins.object-fit;
        }
    }

    @include mixins.min-width(l) {
        .container {
            display: grid;
            grid-template-columns: 1fr .5fr;
        }
    }

}