/* Quote */
.quote {padding-block: 2.5rem;}
.quote .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 3.5rem;}
.quote .content > :first-child {font-size: var(--fs-xxl, 46px); margin-bottom: 1.5rem;}
.quote .content > p {max-height: 4.125rem; color: var(--c-secondary); margin-bottom: 2.5rem;}
.quote li {display: flex; align-items: center; gap: 2rem;}
.quote li > :first-child {font-size: var(--_fs-xxl, 120px); font-weight: 700; color: var(--_c-lgt-primary); line-height: 1;}
.quote li p {max-height: 2.875rem;}
.quote li:not(:last-child) {margin-bottom: 2.875rem;}
.quote li:nth-of-type(2) > :first-child {color: var(--_c-md-primary);}
.quote li:nth-of-type(3) > :first-child {color: var(--_c-red);}
.quote li div :first-child {display: block; font-size: calc(var(--fs-sm, 20px) + 2px); text-transform: capitalize; color: #000; margin-bottom: 0.875rem; text-wrap: nowrap;}

/* Media Queries */
@media only screen and (max-width: 991px) {
    /* Quote */
    .quote {padding-block: 2rem;}
    .quote .content > :first-child {margin-bottom: 1rem;}
    .quote .content > p {margin-bottom: 1.5rem;}
    .quote .wrapper {grid-template-columns: 1fr; gap: 1.25rem;}
    .quote ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.5rem;}
    .quote li {flex-direction: column; align-items: center; text-align: center; gap: 1rem;}
}
@media only screen and (max-width: 767px){
    /* Quote */
    .quote ul {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width: 575px){
    /* Quote */
    .quote {padding-block: 1.5rem;}
    .quote .content > :first-child {font-size: var(--fs-xl); margin-bottom: 0.5rem;}
    .quote .content > p {margin-bottom: 0.75rem;}
    .quote li {gap: 0.75rem;}
    .quote li div :first-child {text-wrap: wrap; margin-bottom: 0.375rem;}
    .quote li:not(:last-child) {margin-bottom: 1.25rem;}
}
@media only screen and (max-width: 475px){
    /* Quote */
    .quote ul {grid-template-columns: 1fr;}
}