/* CTA CSS */

@use 'responsive';
@use 'variables'as var;

.cta-area {
    .cta-text {
        h2 {
            font-size: 1.5rem;
            color: var.$white;

            @media #{responsive.$breakpoint-md} {
                font-size: 2rem;
            }

            @media #{responsive.$breakpoint-xl} {
                font-size: 2.5rem;
            }
        }
    }

    &.cta4 {
        .cta-text {

            h2 {
                font-size: 1.5rem;
                margin-bottom: 1rem;

                @media #{responsive.$breakpoint-md} {
                    font-size: 1.75rem;
                }

                @media #{responsive.$breakpoint-lg} {
                    font-size: 2.125rem;
                }

                @media #{responsive.$breakpoint-xl} {
                    font-size: 2.5rem;
                }
            }
        }

        .cta-thumb-group {
            img {
                border-radius: 12rem;
            }

            .col-4:nth-child(1) {
                img {
                    transform: translateY(-20px);

                    @media #{responsive.$breakpoint-lg} {
                        transform: translateY(-50px);
                    }
                }
            }

            .col-4:nth-child(2) {
                img {
                    transform: translateY(20px);

                    @media #{responsive.$breakpoint-lg} {
                        transform: translateY(50px);
                    }
                }
            }

            .col-4:nth-child(3) {
                img {
                    transform: translateY(-20px);

                    @media #{responsive.$breakpoint-lg} {
                        transform: translateY(-50px);
                    }
                }
            }
        }
    }
}