.quote { position: relative; display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.4rem, 3vw, 2.2rem); min-block-size: 100%; box-shadow: inset 0 0 0 1px var(--c-border); }
.quote__mark { inline-size: 36px; block-size: 27px; color: var(--c-accent); opacity: 0.9; }
[dir='rtl'] .quote__mark { transform: scaleX(-1); }
.quote__stars { display: flex; gap: 2px; }
.star { inline-size: 16px; block-size: 16px; fill: var(--c-border); }
.star--on { fill: var(--c-accent); }
.quote__text { flex: 1; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; }
.quote__text p { margin: 0; }
.quote__author { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding-block-start: 1rem; border-block-start: 1px solid var(--c-border); }
.quote__avatar { inline-size: 48px; block-size: 48px; flex: none; display: grid; place-items: center; font-family: var(--font-heading); color: var(--c-accent); }
.quote__avatar img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.quote__name { display: block; font-weight: 600; }
.quote__role { display: block; }
.quote__product { margin-inline-start: auto; font-size: var(--tiny); }
.quotes__pause .icon--play { display: none; }
.quotes__pause[aria-pressed='true'] .icon--play { display: block; }
.quotes__pause[aria-pressed='true'] .icon--pause { display: none; }