blockquote.dxp-quote {
  /* component variables */
  --quote-background-color: var(--dxp-color-background-primary);
  --quote-foreground-color: var(--dxp-color-foreground-primary);

  display: flex;
  flex-wrap: wrap;
  margin: 0;
  /* end: component variables */

  padding: 2rem;
  color: var(--quote-foreground-color);
  background-color: var(--quote-background-color);
}

  blockquote.dxp-quote.dxp-quote--minimal {
    align-items: center;
    justify-content: center;
    max-width: 65rem;
    border-radius: 0.625rem;
  }

  blockquote.dxp-quote.dxp-quote--large {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    max-width: 80rem;
  }

  @media all and (width >= 1024px) {

  blockquote.dxp-quote.dxp-quote--large {
      flex-direction: row
  }
    }

  blockquote.dxp-quote.dxp-quote--large .dxp-quote__content {
      display: flex;
      width: 100%;
    }

  @media all and (width >= 1024px) {

  blockquote.dxp-quote.dxp-quote--large .dxp-quote__content {
        width: 50%
    }
      }

  blockquote.dxp-quote.dxp-quote--large .dxp-quote__quote-container {
      display: flex;
      flex-direction: column;
    }

  blockquote.dxp-quote.dxp-quote--large .dxp-quote__quote-lead {
      margin: 0 1rem 0 0;
      font-size: 2rem;
      font-weight: bold;
    }

  blockquote.dxp-quote.dxp-quote--large .dxp-quote__quote {
      display: inline;
      width: 75%;
      margin: 0;
      font-size: 2rem;
      font-weight: bold;
    }

  blockquote.dxp-quote.dxp-quote--large .dxp-image {
      margin: 1rem 0 0 0;
    }

  @media all and (width >= 1024px) {

  blockquote.dxp-quote.dxp-quote--large .dxp-image {
        width: calc(50% - 1rem);
        margin: 0 0 0 1rem
    }
      }

  blockquote.dxp-quote .dxp-quote__content {
    display: flex;
  }

  blockquote.dxp-quote .dxp-quote__quote {
    display: inline;
    margin: 0;
    font-weight: bold;
  }

  blockquote.dxp-quote .dxp-quote__name {
    display: inline;
    word-wrap: anywhere;
    font-weight: 200;
  }

  blockquote.dxp-quote.dxp-quote--medium {
    --quote-grid-template-columns: 1fr;
    --quote-grid-template-areas:
      "content"
      "content";

    display: grid;
    grid-template-areas: var(--quote-grid-template-areas);
    grid-template-columns: var(--quote-grid-template-columns);
    gap: 1.5rem;
  }

  @media all and (width >= 768px) {

  blockquote.dxp-quote.dxp-quote--medium {
      --quote-grid-template-columns: 10.9375rem 1fr 3.125rem;
      --quote-grid-template-areas: "content content icon";
  }

      blockquote.dxp-quote.dxp-quote--medium:has(.dxp-image) {
        --quote-grid-template-areas: "image content icon" !important;
      }
    }

  @media all and (width >= 1024px) {

  blockquote.dxp-quote.dxp-quote--medium {
      --quote-grid-template-columns: 4fr 6fr 3.125rem;
  }
    }

  blockquote.dxp-quote.dxp-quote--medium:has(.dxp-image) {
      --quote-grid-template-areas:
        "image"
        "content";
    }

  blockquote.dxp-quote.dxp-quote--medium .dxp-quote__quote-container {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }

  blockquote.dxp-quote.dxp-quote--medium .dxp-quote__quote-icon {
        display: none;
        grid-area: icon;
        justify-content: flex-end;
      }

  @media all and (width >= 768px) {

  blockquote.dxp-quote.dxp-quote--medium .dxp-quote__quote-icon {
          display: flex
      }
        }

  blockquote.dxp-quote.dxp-quote--medium .dxp-quote__quote-icon svg.dxp-icon {
          margin: 0;
        }

  blockquote.dxp-quote.dxp-quote--medium .dxp-quote__content {
        grid-area: content;
      }

  blockquote.dxp-quote.dxp-quote--medium .dxp-quote__quote {
        flex-grow: 1;
        font: var(--dxp-font-h5);
        font-weight: 400;
      }

  blockquote.dxp-quote.dxp-quote--medium .dxp-quote__source {
        display: flex;
        flex-direction: column;
      }

  blockquote.dxp-quote.dxp-quote--medium .dxp-quote__source .name {
          font: var(--abb-font-body-large);
        }

  blockquote.dxp-quote.dxp-quote--medium .dxp-quote__source .position {
          color: var(--dxp-color-foreground-tertiary);
          font: var(--abb-font-body-medium);
        }

  blockquote.dxp-quote.dxp-quote--medium .dxp-image {
      grid-area: image;
    }

  blockquote.dxp-quote.dxp-quote--medium .dxp-image picture, blockquote.dxp-quote.dxp-quote--medium .dxp-image img {
        width: 100%;
        max-width: 21.875rem;
        height: auto;
      }

  @media all and (width >= 1024px) {

  blockquote.dxp-quote.dxp-quote--medium .dxp-image picture, blockquote.dxp-quote.dxp-quote--medium .dxp-image img {
          width: auto;
          height: 100%
      }
        }