.quote-card{
  --quote-gap:16px; --quote-top:1fr;
  width:100%; height:100%; box-sizing:border-box;
  display:grid; grid-template-columns:minmax(0, 1fr);
  grid-template-rows:var(--quote-top) auto auto 1fr;
  grid-template-areas:"." "body" "author" ".";
  padding:8px 0; text-align:left;
}
.quote-body{
  grid-area:body; min-width:0;
  font-family:var(--font-display); font-weight:var(--font-weight-light);
  color:var(--md-neutral-foreground-1-rest);
  line-height:1.35;
  white-space:pre-line;
}
.quote-text{ outline:none; }
.quote-mark{ color:var(--md-brand-foreground-1-rest); }
.quote-mark-open{ margin-right:.18em; }
.quote-mark-close{ margin-left:.18em; }

.quote-author{
  grid-area:author; min-width:0; margin-top:var(--quote-gap);
  display:flex; flex-direction:column; gap:2px;
  font-family:var(--font-sans); font-weight:var(--font-weight-light);
}
.quote-author-name{ color:var(--md-neutral-foreground-1-rest); outline:none; }
.quote-author-role, .quote-author-company{ color:var(--md-neutral-foreground-3-rest); outline:none; }
.quote-card:not([data-style="card"]) .quote-author{
  flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:6px;
}
.quote-card:not([data-style="card"]) .quote-author-name{ flex-basis:100%; }
.quote-card:not([data-style="card"]) .quote-author:has(.quote-author-company:not(:empty)) .quote-author-role:not(:empty)::after{ content:","; }

.quote-card[data-size="L"]{ --quote-gap:24px; }
.quote-card[data-size="L"] .quote-body{ font-size:56px; }
.quote-card[data-size="L"] .quote-author-name{ font-size:var(--md-typography-font-size-600); line-height:32px; }
.quote-card[data-size="L"] .quote-author-role, .quote-card[data-size="L"] .quote-author-company{ font-size:var(--md-typography-font-size-500); line-height:28px; }
.quote-card[data-size="M"] .quote-body{ font-size:var(--md-typography-font-size-700); }
.quote-card[data-size="M"] .quote-author-name{ font-size:var(--md-typography-font-size-500); line-height:28px; }
.quote-card[data-size="M"] .quote-author-role, .quote-card[data-size="M"] .quote-author-company{ font-size:var(--md-typography-font-size-400); line-height:24px; }
.quote-card[data-size="S"]{ --quote-gap:12px; }
.quote-card[data-size="S"] .quote-body{ font-size:var(--md-typography-font-size-500); }
.quote-card[data-size="S"] .quote-author-name{ font-size:var(--md-typography-font-size-400); line-height:24px; }
.quote-card[data-size="S"] .quote-author-role, .quote-card[data-size="S"] .quote-author-company{ font-size:var(--md-typography-font-size-300); line-height:20px; }

.quote-photo{
  display:none; grid-area:photo; position:relative; overflow:hidden; min-height:0;
  background:var(--md-neutral-background-2-rest);
  flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.quote-photo-glow{
  position:absolute; width:126px; height:126px; right:-45px; bottom:-80px; border-radius:9999px;
  background:var(--md-brand-background-inverted-rest); filter:blur(40px);
}
.quote-photo-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.quote-photo:has(> .quote-photo-img[data-cover-out]){ container-type:size; }
.quote-photo-img[data-cover-out]{
  --cf-w:calc(max(100cqw, 100cqh * var(--cf-r)) * var(--cf-z));
  --cf-h:calc(max(100cqh, 100cqw / var(--cf-r)) * var(--cf-z));
  inset:auto; left:calc((100cqw - var(--cf-w)) * var(--cf-x)); top:calc((100cqh - var(--cf-h)) * var(--cf-y));
  width:var(--cf-w); height:var(--cf-h); max-width:none; object-fit:fill; transform:none;
}
.quote-photo-placeholder{ position:relative; font-size:64px; color:var(--md-neutral-foreground-3-rest); }
.quote-photo .quote-photo-hint{ position:relative; padding:0 24px; font-size:var(--md-typography-font-size-300); }

.quote-card[data-style="card"]{
  grid-template-columns:minmax(0, 2fr) minmax(0, 3fr);
  grid-template-rows:minmax(32px, var(--quote-top)) auto auto minmax(32px, 1fr);
  grid-template-areas:"photo ." "photo body" "photo author" "photo .";
  column-gap:40px; padding:0 40px 0 0;
  background:var(--md-neutral-background-1-rest);
  border-radius:var(--md-radius-240, 24px);
  box-shadow:0 12px 28px rgba(112,144,176,0.32), 0 2px 6px rgba(112,144,176,0.22);
  overflow-clip-margin:48px;
}
.quote-card[data-style="card"][data-size="S"]{ column-gap:32px; padding-right:32px; }
.quote-card[data-style="card"]:not(.no-stretch){
  container-type:size;
  grid-template-columns:auto minmax(0, 1fr);
}
.quote-card[data-style="card"]:not(.no-stretch) > .quote-photo{ width:min(80cqh, 50cqw); }
.quote-card[data-style="card"] .quote-photo{
  display:flex;
  border-radius:var(--md-radius-240, 24px) 0 0 var(--md-radius-240, 24px);
}
.quote-card[data-style="card"] .quote-photo-glow{ display:none; }

.quote-card:not([data-style="card"]):has(> .quote-photo.has-image){
  grid-template-columns:auto minmax(0, 1fr);
  grid-template-areas:". ." "body body" "photo author" ". .";
  column-gap:16px;
}
.quote-card:not([data-style="card"]) > .quote-photo.has-image{
  display:flex; align-self:center; margin-top:var(--quote-gap);
  width:72px; height:72px; border-radius:var(--md-radius-160, 16px);
  box-shadow:0 4px 8px rgba(112,144,176,0.25), 0 0 2px rgba(112,144,176,0.2);
}
.quote-card:not([data-style="card"]):has(> .quote-photo.has-image) .quote-author{ align-self:center; }
.quote-card:not([data-style="card"]) .quote-photo-glow{ width:36px; height:36px; right:-13px; bottom:-23px; filter:blur(12px); }
.quote-card:not([data-style="card"])[data-size="S"] > .quote-photo.has-image{ width:56px; height:56px; border-radius:var(--md-radius-120, 12px); }
.quote-card:not([data-style="card"])[data-size="L"]:has(> .quote-photo.has-image){ column-gap:24px; }
.quote-card:not([data-style="card"])[data-size="L"] > .quote-photo.has-image{ width:96px; height:96px; border-radius:20px; }

.quote-card[data-align="center"]{ text-align:center; }
.quote-card[data-style="card"][data-align="center"] .quote-author{ align-items:center; }
.quote-card:not([data-style="card"])[data-align="center"] .quote-author{ justify-content:center; }
.quote-card:not([data-style="card"])[data-align="center"]:has(> .quote-photo.has-image){
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:var(--quote-top) auto auto auto 1fr;
  grid-template-areas:"." "body" "photo" "author" ".";
}
.quote-card:not([data-style="card"])[data-align="center"] > .quote-photo.has-image{ justify-self:center; }
.quote-card:not([data-style="card"])[data-align="center"]:has(> .quote-photo.has-image) .quote-author{ margin-top:8px; }

.quote-card[data-valign="top"]{ --quote-top:0px; }

.quote-panel-photo .photo-select{ width:100%; }
.quote-panel-photo + .image-card-panel-dropzone{ margin-top:8px; }
.quote-panel-cutout{ margin-top:8px; }
.quote-card.quote-cutting .quote-photo-img{ animation:quote-cutting 1s ease-in-out infinite alternate; }
@keyframes quote-cutting{ to{ opacity:.45; } }