/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/templates/paragraph/quote/component/paragraph.quote.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************/
.layout--width-edge-to-edge .quote .quote__content {
  margin-left: calc(-50vw + 50% - var(--scrollbar-width, 0px) / 2 * -1);
  margin-right: calc(-50vw + 50% - var(--scrollbar-width, 0px) / 2 * -1);
}

.layout--width-edge-to-edge .quote .quote__content-wrapper {
  padding-inline: var(--safe-area-inline);
  max-width: 1440px;
  margin: 0 auto;
}

.quote [data-color-scheme-callout] {
  --quote--open-quote--color: var(--bg-color);
  --quote--open-quote--border--color: var(--accent--color);
  background-color: var(--bg-color);
  color: var(--text--color);
  padding-block: 18px;
}
.quote__content-wrapper {
  display: grid;
  grid-template-columns: min-content 1fr;
  -moz-column-gap: 18px;
       column-gap: 18px;
  row-gap: 18px;
  padding-inline: 18px;
}
.quote__content-wrapper::before {
  content: open-quote;
  font-size: 9rem;
  color: var(--quote--open-quote--color);
  -webkit-text-stroke-color: var(--quote--open-quote--border--color);
  -webkit-text-stroke-width: 1px;
  margin-top: 7.5994481613px;
  line-height: 1;
  height: 5rem;
}
.quote__body {
  --p--max-width: 100%;
  --p--font-family: YaleNew;
}
.quote__attribution {
  margin-top: 18px;
}
.quote__attribution > * + * {
  margin-top: 0.25em;
}
.quote__attribution-name {
  font-weight: 700;
}
.quote:has(.quote__image) .quote__image {
  --img-width: 100%;
}
@container (width > 768px) {
  .quote:has(.quote__image) .quote__content-wrapper {
    grid-template-columns: min-content 1fr 1fr;
  }
}