@import url("@arc-ui/tokens-arc/dist/custom-media.css");

.blockQuote {
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  margin: 0;
}

.quoteContent {
  line-height: 44px; /* 114.286% */
  margin: 0;
  padding-block: 32px;
}

.quoteDefault {
  color: #5514b4; /* TODO: This needs to be tokenized */
  fill: #5514b4; /* TODO: This needs to be tokenized */
}

.quoteSecondary {
  color: #434343; /* TODO: This needs to be tokenized */
  fill: #434343; /* TODO: This needs to be tokenized */
}

.quoteIcon {
  height: 76.471px;
  width: 100px;
}

svg {
  padding: 0;
}

@media (--arc-custom-media-min-width-m-px) {
  .blockQuote {
    font-size: 40px;
  }

  .quoteContent {
    line-height: 48px; /* 114.286% */
  }
}

@media (--arc-custom-media-min-width-l-px) {
  .quoteIcon {
    height: 95.588px;
    width: 125px;
  }
}

@media (--arc-custom-media-min-width-xl-px) {
  .blockQuote {
    font-size: 56px;
  }

  .quoteContent {
    line-height: 64px; /* 114.286% */
  }
}