$o-quote-bp1: 850;
$o-quote-bp2: 1060;


.o-quote {
  @include slant(true);
  @include template(content, image);
  @include vspacing('padding-top' 0.75, 'padding-bottom' 0.75);
  background-color: palette(secondary, 900);
  color: palette(neutral, 0);
  padding-top: calc(var(--slant-height) + #{space(5)}) !important;
}


.o-quote__main {
  @include contain;
  display: grid;
  grid-template-rows: auto auto;
  grid-row-gap: space(4);
  grid-template-areas:
      "content"
      "image";

  @include mq($o-quote-bp1) {
    grid-template-rows: auto;
    grid-template-columns: 5fr 1fr 6fr;
    grid-template-areas:
        "content . image";
  }

  @include mq($o-quote-bp2) {
    grid-template-columns: 1fr 5fr 1fr 5fr;
    grid-template-areas:
        ". content . image";
  }
}


.o-quote__content {
  margin: 0; //reset blockquote styling
}


.o-quote__text {
  position: relative;
  margin-top: space(3);
  quotes: "\201C" "\201D" "\2018" "\2019";

  &::before,
  &::after {
    @include font-size(xl);
    @include font-weight(bold);
    @include font-family(primary);
    position: absolute;
    color: palette(primary);
  }

  &::before {
    content: open-quote;
    left: space(-3);
    top: 0;
  }

  &::after {
    content: close-quote;
    right: space(-3);
    bottom: 0;
  }
}


.o-quote__author {
  @include font-weight(bold);
  margin-top: space(4);
}


.o-quote__function {
  @include font-weight(semi-bold);
  @include font-size(s);
  color: palette(neutral, 400);
  margin-top: space(1);
}


.o-quote__function {
  margin-top: space(1);
}