:root {
        --blue: #003876;
        --orange: #F9CA24;
    }
    #quote-list {
        list-style: none;
        margin: 1rem 0 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
        align-items: stretch;
        justify-content: end;
        
        @media(max-width: 768px) {
            grid-template-columns: 1fr;
        }
    }
    #quote-list li {
        padding: 1em;
        border: 1px solid #CCC;
        border-radius: .5em;
        position: relative;
        padding: 1rem 1rem 1rem 5rem;   
        
        &:before {
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            top: .25rem;
            font-size: 300%;
            margin:0;
            padding: 0;
            line-height: normal;
            text-align: left;
            content: "\f10d";
            left: 1rem;
        }
        &:nth-child(odd) {
            background: var(--blue);
            color: var(--orange);
        }
        &:nth-child(even) {
            background: var(--orange);
            color: var(--blue);
        }
    }




    :root {
      --primary: #003876;
      --accent: #F9CA24;
      --text: #F7F7F7;
      --quote-color: #FFD700;
      --border-radius: 5rem;
      --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .testimonial {
        background: var(--primary);
        padding: 2em;
        border-radius: var(--border-radius);
        box-shadow: -5px 5px 5px #CCC;
        margin-top: 1em;
        margin-bottom: 3em;
        font-size: 20px;
        * {
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
        }
        
       
        
        .top {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            position: relative;
            
            .quote-mark {
                color: #FFFFFF50;
                order: 1;
                flex-grow: 0.5;
                width: 1em;
                span {
                    line-height: 0;
                    padding: 0;
                    font-size: 6em;
                    height: 0;
                    margin: 0;
                    position: absolute;
                    top: 0.35em;
                    @media (max-width: 768px) {
                        font-size: 3.5em;
                    }
                }
            }
            
            .title {
                color: var(--accent);
                text-align: left;
                text-transform: uppercase;
                flex-grow: 1;
                font-size: 40px;
                order: 2;
                padding-inline: 1em;
                margin: 0;
                
                @media (max-width: 768px) {
                    font-size: .9em;
                }
            }
            
            .icon-wrapper {
                position: relative;
                margin-top: -3em;
                order: 3;
                
                .icon {
                        width: 150px;
                        overflow: hidden;
                        border-radius: 100%;
                        border: 3px solid #FFF;
                        aspect-ratio: 1;
                        display: flex;
                        align-items: center;
                        align-content: center;
                        padding: 1.5em;
                        background: var(--accent);
    
                        @media (max-width: 768px) {
                            width: 100%;
                            max-width: 150px;
                        }
                    
                        
                    img {
                        aspect-ratio: 1;
                        width: 100%;
                        opacity: .7;
                    }
                }
                
            }
        }
        
        
        .content {
            text-align: center;
            padding-inline: 4em;
            @media (max-width: 768px) {
                padding-inline: 0;
            }
            
            .quote {
                color: var(--accent);
                font-size: 1em;
            }
            .core-value {
                color: var(--text);
                font-size: .75em;
            }
        }
        
        &:nth-child(even) {
            background: var(--accent);
            box-shadow: 5px 5px 5px #CCC;
            
            .quote-mark {
                order: 3;
                color: var(--primary);
                opacity: .5;
                span {
                    transform: scaleX(-1);
                    display: inline-block;
                }
            }
            .title {
                order: 2;
                text-align: right;
                color: var(--primary);
            }
            .icon-wrapper {
                order: 1;
                
                .icon {
                    background: var(--primary);
                    
                    img {
                        filter: invert(1);
                    }
                }
                
            }
            .content {
                .quote {
                    color: var(--primary);
                }
                .core-value {
                    color: #667;
                }
            }
        }
        
    }