styling for the blockquote streamfield

opentech/static_src/src/sass/components/_blockquote.scss

-blockquote {
-    padding: 1rem;
-    margin: 1rem 0;
-    background: $color--tertiary;
-    border-left: 10px solid $color--secondary;
+.blockquote {
+    @extend %h3;
+    position: relative;
+    font-weight: $weight--black;
+    text-align: center;
+
+    &__cite,
+    &__job-title {
+        @include responsive-font-sizes(15px, 17px);
+        display: block;
+        font-style: normal;
+        color: $color--darkest-blue;
+        text-transform: uppercase;
+    }
+
+    &__cite {
+        h5 {
+            margin: 0;
+        }
+    }
+
+    &__job-title {
+        font-weight: $weight--normal;
+    }
 }

opentech/static_src/src/sass/components/_wrapper.scss

@@ -19,6 +19,61 @@
     &--flex {
         display: flex;
         flex-direction: column;
+    &--breakout {
+        position: relative;
+        right: 50%;
+        left: 50%;
+        width: 100vw;
+        margin-right: -50vw;
+        margin-left: -50vw;
+    }
+
+    &--blockquote {
+        padding: 1rem 0;
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+        background: $color--light-grey;
+
+        @include media-query(tablet-portrait) {
+            padding: 4rem 0;
+            margin-top: 4rem;
+            margin-bottom: 4rem;
+        }
+
+        svg {
+            position: absolute;
+            display: none;
+            width: 110px;
+            height: 110px;
+            fill: $color--white;
+
+            @include media-query(tablet-portrait) {
+                display: block;
+            }
+
+            &:first-child {
+                top: 0;
+                left: 0;
+                transform: rotate(90deg);
+            }
+
+            &:last-child {
+                right: 0;
+                bottom: 0;
+                transform: rotate(-90deg);
+            }
+        }
+    }
+
+    &--dark-bg {
+        padding: 2rem 20px;
+        color: $color--white;
+        background-color: $color--mustard;
+
+        @include media-query(tablet-portrait) {
+            padding: 4rem 20px;
+        }
+    }
 
         @include media-query(tablet-portrait) {
             flex-direction: row;

opentech/templates/blocks/quote_block.html

-<blockquote>
-    <p>{{ value.quote }}</p>
-    {% if value.attribution %}{{ value.attribution }}{% endif %}
-    {% if value.attribution %}{{ value.job_title }}{% endif %}
-</blockquote>
+<div class="wrapper wrapper--breakout wrapper--blockquote">
+    <svg><use xlink:href="#hero-standard-left-pixels"></use></svg>
+    <div class="wrapper wrapper--medium">
+        <blockquote class="blockquote" {% if value.attribution %} cite="{{ value.attribution }}"{% endif %}>
+            <p>{{ value.quote }}</p>
+            {% if value.attribution %}
+                <cite class="blockquote__cite"><h5>{{ value.attribution }}</h5></cite>
+            {% endif %}
+            {% if value.job_title %}
+                <div class="blockquote__job-title">{{ value.job_title }}</div>
+            {% endif %}
+        </blockquote>
+    </div>
+    <svg><use xlink:href="#hero-standard-left-pixels"></use></svg>
+</div>