.block-call_to_action
    --cta-background-color: #{$block-call-to-action-background}
    @include in-page-with-or-without-sidebar
        h2, h3
            @include h5
            margin-bottom: $spacing0
    .call_to_action
        color: $block-call-to-action-color
        .description
            a
                color: inherit
                text-decoration-color:  $block-call-to-action-color
            p
                @include h2
        .actions
            [role="group"]
                @include media-breakpoint-down(desktop)
                    display: flex
                    flex-direction: column
            a
                @include meta
                color: $block-call-to-action-color
                margin-right: $spacing2
                margin-top: $spacing1
                text-decoration-color: rgba($block-call-to-action-color, .3)
                display: inline-block
                &:hover
                    text-decoration-color: $block-call-to-action-color
                &:first-child
                    @include btn
                    background: $block-call-to-action-button-background
                    color: $block-call-to-action-button-color
                    transition: background .3s ease, color .3s ease
                    &:hover,
                    &:focus-visible,
                    &:focus
                        background: $block-call-to-action-button-hover-background
                        color: $block-call-to-action-button-hover-color
                &:last-child
                    margin-bottom: 0
        * + .actions
            margin-top: calc(#{$spacing2} - #{$spacing1})

    @include media-breakpoint-down(desktop)
        background-color: var(--cta-background-color)
        padding-top: 0
        padding-bottom: 0
        .call_to_action
            padding: $spacing3 0
            .actions
                a
                    margin-right: $spacing1
                    &:last-child
                        margin-bottom: 0
        .call_to_action--with-image
            padding-top: half($grid-gutter-sm)
            display: flex
            flex-direction: column
            > *
                order: 2
            picture
                margin-bottom: offset(1)
                order: 1

    @include in-page-with-sidebar
        .call_to_action
            display: flex
            flex-direction: column
            > *
                order: 2
            > div
                background-color: var(--cta-background-color)
                padding: $grid-gutter
                width: 100%
                position: relative
                &::after
                    background-color: var(--cta-background-color)
                    content: ''
                    display: block
                    position: absolute
                    top: 0
                    bottom: 0
                    left: 100%
                    width: Max(#{$grid-gutter}, calc(50vw - #{half($grid-max-width)} + #{$grid-gutter}))
            &--with-image
                picture
                    order: 1
                    padding-left: $grid-gutter
                    padding-right: $grid-gutter
                    position: relative
                    z-index: 2
                    img
                        width: col(3, 6)
                        margin-bottom: calc(-#{$grid-gutter} + -#{$spacing1})
                > div
                    padding-top: calc(#{$grid-gutter} + #{$spacing3})

    @include media-breakpoint-up(desktop)
        @include in-page-without-sidebar
            background-color: var(--cta-background-color)
            padding-top: 0
            padding-bottom: 0
            .block-content
                padding: $spacing4 $grid-gutter
                margin-left: -$grid-gutter
                margin-right: -$grid-gutter
            .call_to_action--with-image
                align-items: start
                display: grid
                grid-template-columns: repeat(12,1fr)
                > div
                    grid-column: 1/7
                > picture
                    grid-column: 8/13
            .call_to_action--without-image
                display: block
                > div
                    column-gap: $grid-gutter
                    display: grid
                    grid-template-columns: repeat(12,1fr)
                    h2, h3, .description
                        grid-column: 1/9
                    .actions
                        align-items: flex-start
                        display: flex
                        flex-direction: column
                        grid-column: 10/13
                        margin-top: 0
                        a
                            margin-right: 0
                            &:first-child
                                margin-top: 0
                        a + a
                            margin-top: $spacing1
                @include media-breakpoint-down(lg)
                    > div
                        h2, h3, .description
                            grid-column: 1/8
                        .actions
                            grid-column: 9/13