@use "sass:color";
@use "../abstracts/mixins";
@use "../abstracts/variables";

.sectionQuote{
    position: relative;
    margin-top: 2vh;
    margin-left: 8.2vw;
    margin-right: mixins.vwCol(1,0);
    padding-bottom: 5px;

    @include mixins.respondTo('md'){
        margin-right: 0;
    }
    
    @include mixins.respondTo('xs'){
        margin-left: 0;
        margin-right: 0;
    }

    &_icon{
        position: absolute;
        top: -10px; right: calc(100% + 35px);
        color: #C3C3C3;

        @include mixins.respondTo('xs'){
            transform: scale(0.85);
            top: -20px;
            right: calc(100% + 10px);
        }
    }

    &_content{
        color: #828282;
        @include mixins.fontSize(20,30);
        text-transform: uppercase;
        font-weight: 700;

        strong, b{
            color: variables.$cPrimary;
        }

        @include mixins.respondTo('md'){
            @include mixins.fontSize(18,24,variables.$baseFontSizeXs);
        }

        @include mixins.respondTo('xs'){
            @include mixins.fontSize(16,16,variables.$baseFontSizeXs);

            br{
                &, &::after{
                    content: ' ';
                }
            }
        }
    }

    &_link{
        margin-top: 3vh;
    }

    &--light{
        .sectionQuote_icon{
            color: color.adjust(variables.$cLight, $alpha: -0.6);
        }
        
        .sectionQuote_content{
            color: color.adjust(variables.$cLight, $alpha: -0.6);
        }
    }
}

// .sectionQuoteWrap{
//     overflow: hidden;
//     position: relative;
//     opacity: 0;
// }