@use "../base/mixins";

section.flexi-block.block--content-cta-04 {
    .content {
        max-width: var(--container-width);
    }

    .content-cta-04__heading {
        margin-top: 0;
        font-size: clamp(1.75rem, 4vw, 4rem);
        line-height: 1.125;
        margin-bottom: clamp(28px, 4vw, 54px);
    }

    .content-cta-04__content {
        margin-bottom: 28px;
    }

    .buttons {
        display: flex;
        flex-wrap: wrap;
        gap: var(--site-gutter);

        &--mobile {
            display: flex;
        }

        &--desktop {
            display: none;
        }
    }

    @include mixins.min-width(m) {
        .content-cta-04__content {
            margin-bottom: 0;
        }

        .content {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }

        .buttons {
            &--mobile {
                display: none;
            }

            &--desktop {
                display: flex;
            }
        }
    }

    @include mixins.min-width(l) {
        .content {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
        }
    }

}