:root{--quote-background-color:#fff;--quote-color:#000;--quote-cite-color:#000}.quote{container:quote/inline-size;position:relative}.quote__element{background-color:var(--quote-background-color);margin:0;padding:20px}.quote__cite,.quote__text{color:var(--quote-color);font-family:Galano Grotesque,sans-serif;margin:0}.quote__text{font-size:var(--text-font-size);line-height:1.5}.quote__text--line{margin-left:calc(var(--bar-width)*2);padding-left:0;position:relative}.quote__text--line:before{background-color:var(--bar-color);content:"";display:block;height:calc(100% - var(--bar-height-correction));left:calc(var(--bar-width)*-1*2);margin-right:var(--bar-width);position:absolute;top:50%;top:49%;translate:0 -50%;width:var(--bar-width)}.quote__text--line{--bar-height-correction:0.7em}.quote__cite{color:var(--quote-cite-color);display:grid;gap:0 1rem;grid-template-areas:"name";grid-template-columns:1fr;margin-top:20px}.quote__cite:has(.quote__cite-image){grid-template-areas:"image" "name"}.quote__cite:has(.quote__cite-image):has(.quote__cite-function){grid-template-areas:"image" "name" "function"}.quote__cite:has(.quote__cite-function){grid-template-areas:"name" "function"}.quote__cite-image{aspect-ratio:1/1;border-radius:50%;grid-area:image;height:75px;width:75px}.quote__cite-function,.quote__cite-name{height:-moz-fit-content;height:fit-content;margin:0}.quote__cite-name{color:currentColor;font-size:var(--text-font-size);font-weight:700;grid-area:name;line-height:1}.quote__cite-function{color:currentColor;font-size:1rem;grid-area:function}.quote--no-padding .quote__element{padding:0}.quote--white{--quote-background-color:#fff}.quote--grey{--quote-background-color:#f3eeee}.quote--grey-dark{--quote-background-color:#dbd2d1}.quote--black{--quote-background-color:#000;--quote-color:#fff;--quote-cite-color:#fff}.quote--yellow{--quote-background-color:#fd0}@container quote (width >= 400px){.quote__text{font-size:var(--text-font-size-large)}.quote__cite:has(.quote__cite-image){align-items:center;grid-template-areas:"image name";grid-template-columns:auto 1fr}.quote__cite:has(.quote__cite-image):has(.quote__cite-function){grid-template-areas:"image name" "image function";grid-template-rows:1fr 1fr}.quote__cite:has(.quote__cite-image):has(.quote__cite-function) .quote__cite-name{align-self:end}.quote__cite:has(.quote__cite-image):has(.quote__cite-function) .quote__cite-function{align-self:start}.quote__cite-name{font-size:var(--text-font-size-large);margin:0}.quote__cite-function{font-size:var(--text-font-size)}}@container quote (width >= 500px){.quote__element{padding:40px}}@container quote (width >= 800px){.quote__element{padding:3.5rem}.quote__text{font-size:1.5rem}.quote__text--line{--bar-width:10px;--bar-height-correction:18px}.quote__cite{margin-top:2rem}}