section.pro-callout {

    .testimonial-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 4rem 2.5rem 2.5rem 2.5rem;
        border-radius: 16px;
        column-gap: 2.5rem;
        @media (max-width: 768px) {
            grid-template-columns: 1fr;
            padding: 5rem 1.5rem 2rem 1.5rem;
        }
        .quote-container {
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            border-bottom-right-radius: 16px;
            padding: 2rem;
            position: relative;
            @media (max-width: 768px) {
                margin-bottom: 1.5rem;            
            }
        }
        p.quote { 
            font-size: var(--size-font-heading-xl);
            line-height: var(--line-height-tight);
            font-weight: var(--font-weight-bold);
        }
        span.opening-quote-icon {
            font-size: var(--size-font-display-lg);
            font-weight: var(--font-weight-bold);
            line-height: 1;
        }
        span.quote-emoji {
            position: absolute;
            left: 50%;
            top: -10px;
            transform: translate(-50%, -70%);
            z-index: 2;
        }
        .quote-emoji-text {
            position: absolute;
            left: 50%;
            top: 0;
            transform: translate(-50%, -55%);
            font-family: Arial, Helvetica, sans-serif !important;
            font-size: 58px;
            line-height: 1;
            z-index: 2;
        }
        .quote-emoji-shape {
            position: absolute;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
            z-index: 1;
            svg {
                display: block;
                width: 5.4375rem;
                height: auto;
            }    
        }
        .quote-description {
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: start;
        }
        p.quote-header {
            font-size: var(--size-font-display-md);
            line-height: 1;
            font-weight: var(--font-weight-bold);
            margin-bottom: 1rem;
        }
        p.quote-supporting-description {
            font-size: var(--size-font-body-md);
            line-height: var(--line-height-body);       
            border-radius: 8px;
            padding: 0.75rem 1.5rem;                       
        }
    }

    .emoji-text-container {
        position: absolute;
        z-index: 2;
        transform: translateY(-30px)
    }

    span.emoji {
        position: absolute;
        right: 5rem;
        bottom: 5rem;        
        z-index: 2;
        order: 2;
        @media (max-width: 768px) {
            order: 1;
            position: absolute;
            left: 72px;
            right: auto;
            top: 68px;
            bottom: auto;
            transform: translateX(-50%);
        }
    }
    .emoji-text {
        position: absolute;        
        left: 50%;
        top: 5px;
        transform: translate(-50%, -55%);
        font-size: 58px;
        font-family: Arial, Helvetica, sans-serif !important;
        line-height: 1;
        z-index: 2;
    }
    .emoji-shape {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        z-index: 1;
        svg {
            display: block;
            width: 5.4375rem;
            height: auto;
        }    
    }

    .large-statistic-container {
        border-radius: 16px;
        padding: 2rem;        
        display: grid;
        grid-template-columns: 85% 15%;
        position: relative;
        @media (max-width: 768px) {
            grid-template-columns: 1fr;
            padding: 9rem 1.5rem 2rem 1.5rem;
        }
        p.large-statistic-header {
            font-size: 3rem;
            line-height: var(--line-height-tight);       
            font-weight: var(--font-weight-bold);
            margin-bottom: 1rem;
            @media (max-width: 768px) {
                font-size: 2.5rem;
            }
        }
        p.large-statistic-supporting-description {
            font-size: var(--size-font-body-md);
            line-height: var(--line-height-body);       
            border-radius: 8px;
            padding: 0.75rem 1.5rem;                       
        }
        .large-statistic-content {
            display: flex;
            flex-flow: column;         
            align-items: start;
            order: 1;
            @media (max-width: 768px) {
                order: 2;
            }
        }
    }

    .small-statistic-container {
        border-radius: 16px;
        padding: 2rem;        
        display: grid;
        grid-template-columns: 85% 15%;
        position: relative;
        @media (max-width: 768px) {
            grid-template-columns: 1fr;
            padding: 7rem 1.5rem 2rem 1.5rem;
        }
        p.small-statistic-header {
            font-size: var(--size-font-heading-xl);
            line-height: var(--line-height-tight);       
            font-weight: var(--font-weight-bold);
            margin-bottom: 1rem;
        }
        p.small-statistic-supporting-description {
            font-size: var(--size-font-body-lg);
            line-height: var(--line-height-body);                   
        }
        span.emoji {
            @media (max-width: 768px) {
                top: 45px;
            }
        }
    }

    /* Color Modes */
    .yellow-color-mode {

        /* Quote */
        background-color: var(--yellow-900);
        p.quote-header, p.quote-supporting-description { 
            color: var(--yellow-400);
        }
        p.quote, span.opening-quote-icon {
            color: var(--yellow-1000);
        }
        .quote-container {
            background-color: var(--yellow-400);
        }
        .quote-emoji-shape {
            svg {
                path {
                    fill: var(--yellow-1000);
                }
            }    
        }
        p.quote-supporting-description {
            background-color: var(--yellow-1000);
        }

        /* Large Statistic */
        p.large-statistic-header {
            color: var(--yellow-400);
        }
        p.large-statistic-supporting-description {
            color: var(--yellow-400);
            background-color: var(--yellow-1000);
        }

        /* Small Statistic */
        .small-statistic-container {            
        }
        p.small-statistic-header {
            color: var(--yellow-400);
        }
        p.small-statistic-supporting-description {
            color: var(--yellow-400);
        }
        .emoji-shape {
            svg {
                fill: var(--yellow-1000);
            }
        }

    }

    .blue-color-mode {

        /* Quote */
        background-color: var(--blue-900);
        p.quote-header, p.quote-supporting-description { 
            color: var(--blue-400);
        }
        p.quote, span.opening-quote-icon {
            color: var(--blue-1000);
        }
        .quote-container {
            background-color: var(--blue-400);
        }
        .quote-emoji-shape {
            svg {
                path {
                    fill: var(--blue-1000);
                }
            }    
        }
        p.quote-supporting-description {
            background-color: var(--blue-1000);
        }

        /* Large Statistic */
        p.large-statistic-header {
            color: var(--blue-400);
        }
        p.large-statistic-supporting-description {
            color: var(--blue-400);
            background-color: #1C242DBF;
        }

        /* Small Statistic */
        .small-statistic-container {            
        }
        p.small-statistic-header {
            color: var(--blue-400);
        }
        p.small-statistic-supporting-description {
            color: var(--neutral-0);
        }
        .emoji-shape {
            svg {
                fill: var(--blue-400);
            }
        }
    }

    .green-color-mode {

        /* Quote */
        background-color: var(--green-900); 
        p.quote-header, p.quote-supporting-description { 
            color: var(--green-300);
        }
        p.quote, span.opening-quote-icon {
            color: var(--green-900);
        }
        .quote-container {
            background-color: var(--green-300);
        }
        .quote-emoji-shape {
            svg {
                path {
                    fill: var(--green-1000);
                }
            }    
        }
        p.quote-supporting-description {
            background-color: var(--green-1000);
        }

        /* Large Statistic */
        p.large-statistic-header {
            color: var(--green-300);
        }
        p.large-statistic-supporting-description {
            color: var(--green-300);
            background-color: var(--green-1000);
        }

        /* Small Statistic */
        .small-statistic-container {
            background-color: var(--brand-900);
        }
        p.small-statistic-header {
            color: var(--green-300);
        }
        .emoji {
            svg {
                path {
                    fill: var(--green-300);
                }
            }    
        }
    }    
}