/*	---------------------------------------------------------------
	PX to REM
	---------------------------------------------------------------
*/
/*	---------------------------------------------------------------
	Maps for styleguide and utility classes
	---------------------------------------------------------------
*/
/*	---------------------------------------------------------------
	PX to REM
	---------------------------------------------------------------
*/
/*	---------------------------------------------------------------
	Maps for styleguide and utility classes
	---------------------------------------------------------------
*/
.blockquote-component-icon {
  position: relative;
  display: block;
  width: 3rem;
  height: 3rem;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 6.25rem;
  line-height: 3rem;
  margin: 0 auto; }
  .blockquote-component-icon > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .dark-bg .blockquote-component-icon {
    color: var(--skin-secondary-color); }

.blockquote-component-text {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0 0 1.875rem; }
  @media (min-width: 769px) {
    .blockquote-component-text {
      font-size: 1.875rem; } }
  .dark-bg .blockquote-component-text,
  .dark-accent-bg .blockquote-component-text {
    color: var(--color-white); }

.blockquote-component-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--skin-secondary-color); }
  .dark-bg .blockquote-component-name {
    color: var(--skin-secondary-color); }
  .dark-accent-bg .blockquote-component-name {
    color: var(--color-smoke); }

.blockquote-component-figure {
  margin: 0;
  padding: 0 10%; }

.blockquote-component.dark-bg {
  background-color: var(--color-smoke); }

.blockquote-component.dark-accent, .blockquote-component.dark-accent-bg {
  background-color: var(--skin-bg-dark-accent); }

.blockquote-component.light, .blockquote-component.light-bg {
  background-color: var(--skin-bg-light);
  background-image: url("../../../../images/textures/stone.jpg");
  background-repeat: repeat;
  background-position: 100%; }

.experience-commerce_assets-blockquote {
  width: 100%; }
  .experience-commerce_assets-blockquote .bg-accent {
    background-color: var(--color-soft-grey); }

/*# sourceMappingURL=blockquote.css.map*/