.quote {
    text-align: left
}

@media screen and (min-width:768px) {
    .quote {
        text-align: center
    }
}

.quote__text {
    font-size: clamp(3.75rem, 2.5rem + 4.1666666667vw, 7.5rem);
    line-height: clamp(4.375rem, 2.5rem + 6.25vw, 10rem);
    position: relative
}

.quote__text svg {
    display: inline;
    height: clamp(1.125rem, .9791666667rem + .4861111111vw, 1.5625rem);
    margin-top: clamp(.9375rem, .625rem + 1.0416666667vw, 1.875rem);
    vertical-align: text-top;
    width: clamp(1.5625rem, 1.3541666667rem + .6944444444vw, 2.1875rem)
}

.quote__text .line__mask {
    background-color: var(--wp--preset--color--light);
    height: 100%;
    opacity: .8;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 2
}

.quote__text.medium {
    font-size: clamp(2.8125rem, 2.0833333333rem + 2.4305555556vw, 5rem);
    line-height: clamp(3.4375rem, 2.5rem + 3.125vw, 6.25rem)
}

.quote__text.medium svg {
    margin-top: clamp(.75rem, .5833333333rem + .5555555556vw, 1.25rem)
}

.quote__text.small {
    font-size: clamp(2.1875rem, 1.6666666667rem + 1.7361111111vw, 3.75rem);
    line-height: clamp(2.5rem, 1.875rem + 2.0833333333vw, 4.375rem)
}

.quote__text.small svg {
    margin-top: clamp(.75rem, .5833333333rem + .5555555556vw, 1.25rem)
}

.quote__by {
    align-items: flex-end;
    display: flex;
    flex-flow: column;
    gap: clamp(.625rem, .5208333333rem + .3472222222vw, .9375rem);
    margin-top: 144px;
    padding: 0 30px;
    text-align: right
}

@media screen and (min-width:768px) {
    .quote__by {
        align-items: center;
        text-align: center
    }
}

.quote__name {
    align-items: baseline;
    display: flex;
    flex-flow: row;
    font-size: clamp(1.25rem, 1.0416666667rem + .6944444444vw, 1.875rem);
    gap: clamp(.3125rem, .25rem + .2083333333vw, .5rem)
}

.quote__name svg {
    height: clamp(.875rem, .7291666667rem + .4861111111vw, 1.3125rem);
    width: clamp(.3125rem, .2708333333rem + .1388888889vw, .4375rem)
}

.quote.grey--bg .quote__text .line__mask {
    background-color: var(--wp--preset--color--grey)
}

.quote.primary--bg .quote__text .line__mask {
    background-color: var(--wp--preset--color--primary)
}

.quote.secondary--bg .quote__text .line__mask {
    background-color: var(--wp--preset--color--secondary)
}

.quote.tertiary--bg .quote__text .line__mask {
    background-color: var(--wp--preset--color--tertiary)
}

.quote.orange--bg .quote__text .line__mask {
    background-color: var(--wp--preset--color--orange)
}

.quote.eco-step-coral--bg .quote__text .line__mask {
    background-color: var(--wp--preset--color--eco-step-coral)
}

.quote.dark--bg .quote__text .line__mask {
    background-color: var(--wp--preset--color--dark)
}

.quote.dark--bg .quote__by svg path,
.quote.dark--bg .quote__text svg path,
.quote.eco-step-coral--bg .quote__by svg path,
.quote.eco-step-coral--bg .quote__text svg path,
.quote.orange--bg .quote__by svg path,
.quote.orange--bg .quote__text svg path,
.quote.primary--bg .quote__by svg path,
.quote.primary--bg .quote__text svg path,
.quote.tertiary--bg .quote__by svg path,
.quote.tertiary--bg .quote__text svg path {
    fill: var(--wp--preset--color--light)
}

.quote.dark--bg .dark,
.quote.eco-step-coral--bg .dark,
.quote.orange--bg .dark,
.quote.primary--bg .dark,
.quote.tertiary--bg .dark {
    color: var(--wp--preset--color--light)
}

/*# sourceMappingURL=quote.css.map*/