.c-quote {
    padding: 2rem 0 2rem 1.5rem;
    border-left: 2px solid;
    font-family: 'HeadingFontFamily', 'BaseFontFamily', serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.c-quote--base-font {
    .c-quote__text {
        font-family: 'BaseFontFamily', sans-serif;
    }
}

.c-quote__text {
    font-size: $heading-font-size--15;
    line-height: 1.25;
}

.c-quote__author {
    margin-top: 1rem;
    font-size: 1rem;
    color: theme('colors.gray.500');
    font-family: 'BaseFontFamily', sans-serif;

    .text-white & {
        color: #fff;
    }
}

.c-quote--alternative {
    border-left: 0;
    padding: 0;

    .c-quote__icon {
        margin-bottom: 1rem;

        @screen md {
            margin-bottom: 1.5rem;
        }

        .text-white & {
            fill: #fff;
        }
    }

    .c-quote__text {
        font-size: $heading-font-size--2;

        @screen md {
            font-size: $heading-font-size--2625;
        }

        .text-white & {
            color: #fff;
        }
    }

    .c-quote__author {
        @screen md {
            font-size: 1.25rem;
        }
    }
}


.c-quote--color-primary {
    border-color: theme('colors.primary.500');

    .c-quote__text {
        color: theme('colors.primary.500');
    }

    .c-quote__icon {
        fill: theme('colors.primary.500');
    }
}

.c-quote--color-secondary {
    border-color: theme('colors.secondary.500');

    .c-quote__text {
        color: theme('colors.secondary.500');
    }

    .c-quote__icon {
        fill: theme('colors.secondary.500');
    }
}

.c-quote--color-black {
    border-color: theme('colors.black');

    .c-quote__text {
        color: theme('colors.black');
    }

    .c-quote__icon {
        fill: theme('colors.black');
    }
}
