.cta {

    --special-color: var(--wp--preset--color--ci-green);
    --special-colorlight: oklch(from var(--special-color) 0.97 calc(c * 0.15) h);

    display: flex;
    width: 100%;
    gap: 1.5rem;
    padding: var(--wp--preset--font-size--3-dvw);
    border-radius: var(--wp--preset--font-size--2-dvw);
    box-sizing: border-box;
    transition: var(--wp--custom--main-trans);
    background-color: var(--special-colorlight);
    flex-direction: row;
    align-items: center;
    max-width: 1024px !important;

    div{
        padding: var(--wp--preset--font-size--2-dvw);
        width: 100%;
        box-sizing: border-box;

        span{
            color: var(--special-color);
            font-size: 1.5rem;
            font-weight: 600;
        }

        h2{
            margin: 0;
            font-size: clamp(1.5rem, var(--wp--preset--font-size--2-dvw), 2rem);
        }

        h3{
            margin: .5rem 0 2rem 0;
            font-weight: 600;
            font-size: clamp(1.25rem, var(--wp--preset--font-size--2-dvw), 1.5rem);
            color: var(--wp--preset--color--accent);
        }

        p{
            margin-bottom: 0;
             color: var(--wp--preset--color--accent);
        }

        &.meta{
            padding: .5rem 0;
            display: flex;
            gap: 2rem;

            a{
                color: var(--wp--preset--color--text);
            }
        }

        .btn{
            display: inline-block;
            margin-right: 1rem;
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

        .btn{
            background: var(--wp--preset--color--ci-yellow);
            border-radius: 5rem;
            color: var(--wp--preset--color--accent);
            transition: var(--wp--custom--main-trans);
            padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
            border: var(--wp--custom--main-border);
            box-sizing: border-box;

            &.outline{
                background: transparent;
                border-color: var(--wp--preset--color--accent);
            }

            &:hover{
                background: var(--wp--preset--color--accent);
                color: var(--wp--preset--color--light);
            }
        }

        hr{
            margin: 1rem 0;
        }

    }

    figure {
        margin: 0;
        overflow: hidden;
        aspect-ratio: 3 / 4;
        width: 45%;
        height: auto;
        border-radius: var(--wp--preset--font-size--2-dvw);

        img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            transition: var(--wp--custom--main-trans);
        }
    }

   
     &:hover{
        border-color: var(--wp--preset--color--ci-yellow);
        box-shadow: var(--wp--custom--box-shadow);
        transform: translateY(-.25rem);
    }

}

@media screen and (max-width: 800px){
    .cta{
        flex-direction: column;
        text-align: center;

        figure{
            aspect-ratio: 1 / 1;
            width: 60%;
            border-radius: 50%;
            margin-top: 3rem;
        }

        div{

            .btn{
                width: 100%;
                display: block;
                margin: 0;
                margin-bottom: 1rem;
            }
            .meta{
                flex-direction: column;
                gap: .5rem;
            }
        }
    }
}