@layer ds_components {
  .comp-quote {
    gap: var(--ds-component-quote-column-gap);
    align-items: center;
    color: var(--ds-component-quote-color-content);
    background-color: var(--ds-component-quote-color-background);
    border-radius: var(--ds-component-quote-radius);
    min-height: var(--ds-component-quote-picture-max-size);
    position: relative;

    @container body (width > 50rem) {
      display: flex;
      justify-content: start;
    }

    picture {
      max-width: calc(var(--ds-component-quote-picture-max-size) * 0.75);
      margin-inline: auto;
      transform: translateY(
        calc(var(--ds-component-quote-picture-max-size) / -8)
      );
      @container body (width > 50rem) {
        max-width: var(--ds-component-quote-picture-max-size);
        flex-shrink: 0;
        margin-block-start: 0;
        margin-inline: 0;
        transform: none;
      }
    }

    img {
      border-radius: var(--ds-component-quote-picture-radius);
    }

    blockquote {
      font-family: var(--ds-component-quote-blockquote-font-family);
      font-size: var(--ds-component-quote-blockquote-font-size);
      font-weight: var(--ds-component-quote-blockquote-font-weight);
      font-variant: italic;
      padding-block: var(--ds-component-quote-padding-block);
      padding-inline: var(--ds-component-quote-padding-inline);
      max-width: var(--ds-component-quote-max-width);
    }

    footer {
      margin-block-start: var(--ds-component-quote-footer-margin-block-start);
      font-family: var(--ds-component-quote-footer-font-family);
      font-size: var(--ds-component-quote-footer-font-size);
      font-weight: var(--ds-component-quote-footer-font-weight);
      font-style: italic;
      max-width: var(--ds-component-quote-max-width);
    }

    > svg {
      position: absolute;
      bottom: var(--ds-component-quote-padding-block);
      right: var(--ds-component-quote-padding-inline);
      width: var(--ds-component-quote-svg-width);
      height: auto;
      fill: var(--ds-component-quote-color-content);
      opacity: 0.2;
    }
  }
}