.blockquote-wrapper {
  position: relative;
}

blockquote {
    display: flex;
    flex-flow: row nowrap;
    align-items: baseline;
    max-width: 38em;
    margin-top: 4em;
    position: relative;
    background: #ffffffaa;
    padding: 2em 3em ;
    backdrop-filter: blur(6px);
}

.blockquote-icon {
    fill: #ffffff88;
    position: absolute;
    top: 15px;
    left: -75px;
    width: 60px;
}

.blockquote-symbol {
    color: #ffffff88;
    font-size: 150px;
    font-family: 'Sharp Sans Bold';
    position: absolute;
    line-height: 0;
    top: 45px;
    left: -0.7em;
}
.blockquote-symbol.arrow {
    font-size: 100px;
    top: 55px;
    left: -1.3em;
    transform: scaleY(0.85);
}
.blockquote-symbol.question {
    font-size: 100px;
    top: 80px;
    left: -90px;  
}

@media screen and (max-width: 1600px) {
  .blockquote-wrapper {
    margin-left: 6em;
  }
}
@media screen and (max-width: 850px) {
  .blockquote-wrapper {
    margin-left: 0;
  }
  .blockquote-symbol, .blockquote-icon {
    display: none;
}
