call_to_action.sass

.block-call_to_action
    .call_to_action
        color: $block-call-to-action-color
        p:last-of-type
            margin-bottom: 0

        > div
            [role="group"]
                @include media-breakpoint-down(md)
                    display: flex
                    flex-direction: column
            // button
            div + div,
            & >
                a
                    margin-top: 1rem
                    color: $block-call-to-action-color
                    text-decoration-color: rgba($block-call-to-action-color, .3)
                    &:hover
                        text-decoration-color: $block-call-to-action-color
                    &:first-of-type
                        @extend .btn
                        background: $block-call-to-action-button-background
                        color: $block-call-to-action-button-color
        @include in-page-with-nav
            display: flex
            flex-direction: column
            > *
                order: 2
            picture
                order: 1
                padding-left: $grid-gutter
                position: relative
            img
                margin-bottom: -50px
            > div
                background-color: $block-call-to-action-background
                padding: $grid-gutter
                width: 100%
            &--with-image
                > div
                    padding-top: calc(#{$grid-gutter} + 50px)

            @include media-breakpoint-up(md)
                picture
                    padding-left: offset(1, 7)
                    padding-right: offset(3, 7)
                > div
                    padding: offset(1, 7)
                [role="group"]
                    a
                        margin-right: px2rem(20)

    @include in-page-without-nav
        .block-content
            background-color: $block-call-to-action-background
            padding: offset(1)
        .call_to_action--with-image
            @include media-breakpoint-down(md)
                display: flex
                flex-direction: column
                > *
                    order: 2
                picture
                    margin-bottom: offset(1)
                    order: 1
            @include media-breakpoint-up(md)
                @include grid(2, md)
                align-items: center
                > div
                    > *
                        margin-right: offset(1, 5) // ???
                div + div
                    a
                        margin-right: 1rem
        .call_to_action--without-image
            @include media-breakpoint-up(md)
                display: block
                > div
                    column-gap: $grid-gutter
                    display: grid
                    grid-template-columns: repeat(10,1fr)
                    > *
                        grid-column: 1/5
                    div + div,
                    & > a
                        grid-column: 6/11
                    div + div
                        align-items: flex-start
                        display: flex
                        flex-direction: column
                    div + div,
                    & >
                        a:first-of-type
                            margin-top: 0