/*--***********************************************************************************
QUOTES
*********************************************************************************** --*/
.quotes { margin-top: -220px; padding-top: 0;}

.quote { border-radius: var(--brdrd); overflow: hidden;}
.quote-img {  border-radius: var(--brdrd) var(--brdrd) 0 0;}
.quote-img img { width: 100%; object-position: center; object-fit: cover;}
.quote-content { position: relative; padding: 1.8rem 1.6rem 1.8rem 1.7rem;}
.quote-ico { position: absolute; top: 0; transform: translateY(-60%);}
.quote-text { font-size: 1.6rem; line-height: 1.5; font-weight: 500;}
.quote-authors { margin-top: 2.5rem; font-size: 1.3rem; line-height: 1.3; font-weight: 500;}
.quote-authors p { position: relative; padding-left: 1em;}
.quote-authors p:before { content: "–"; position: absolute; margin-left: -1em;}
.quote-authors span { display: block;}

/* main color scheme = .blue-medium */
.quote-content { color: #fff; background: var(--blue-medium);}
.quote-ico { color: var(--blue);}
.purple-medium .quote-content { background: var(--purple-medium);}
.purple-medium .quote-ico { color: #9630D2;}
.blue .quote-content { background: var(--blue);}
.blue .quote-ico { color: var(--blue-light);}
.purple-dark .quote-content { background: var(--purple-dark);}
.purple-dark .quote-ico { color: var(--purple-light);}

@media (max-width:767.98px) {
  .quote { max-width: 388px; margin-left: auto; margin-right: auto;}
  .quote-img img { height: calc(80vw - 32px); max-height: 314px;}
}
@media (min-width:768px) {
  .quote { flex-basis: 25%; display: flex; flex-direction: column;}
  .quote-img img { height: 22rem;}
  .quote-content { flex-grow: 1; display: flex; flex-direction: column;}
  .quote-text { flex-grow: 1;}
}