.speech {
  position: relative;
  box-sizing: border-box;
  padding: 20px;
  padding-bottom: 70px;
  padding-top: 10px;
  --width: calc(var(--w) * min(100vw, 800px));
  margin: 25px auto;
  border: 6px double var(--action);
  width: var(--width);
}

.speech::before {
  content: "“";
  font-family: Mattone;
  font-size: xxx-large;
  position: absolute;
  z-index: 5;
  top: 0;
  left: -16px;
  transform: translateY(-40%);
  filter: drop-shadow(5px 5px var(--background));
  color: var(--action);
}

.speech::after {
  content: "”";
  font-family: Mattone;
  font-size: xxx-large;
  position: absolute;
  z-index: 5;
  bottom: 0;
  right: -16px;
  transform: translateY(12%);
  filter: drop-shadow(-2px -2px 0px var(--background)) drop-shadow(-4px -4px 0px var(--background));
  color: var(--action);
}

.speecher {
  position: absolute;
  bottom: -6px;
  left: -6px;
  padding: 10px;
  background: var(--background);
  border-top: 6px double var(--action);
  border-right: 6px double var(--action);
}

.speecher>img {
  width: 40px;
  z-index: 1;
}

.speecher>span {
  position: absolute;
  background: var(--background);
  z-index: 2;
  width: calc(var(--width) - 69.5px);
  bottom: 0px;
  border-top: 6px double var(--action);
  padding-bottom: 12.5px;
  left: 60px;
  border-top-left-radius: 25px;
  padding-left: 10px;
  padding-top: 12.5px;
  color: var(--gray);
}


.speech.right::before {
  content: "”";
  left: unset;
  right: -16px;
  filter: drop-shadow(-5px 5px var(--background));
}

.speech.right::after {
  content: "“";
  right: unset;
  left: -16px;
  filter: drop-shadow(5px -5px var(--background));
}

.right > .speecher {
  left: unset;
  right: -6px;
  border-left: 6px double var(--action);
  border-right: unset;
}
.right > .speecher > span {
  left: unset;
  right: 60px;
  border-top-left-radius: unset;
  border-top-right-radius: 25px;
  border-right: unset;
  text-align: right;
  padding-left: unset;
  padding-right: 10px;
}