.content_block.quote:before {
  bottom: 0;
  /* mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 20rem
  ) */
}

.quote .background {
  mask-image: 

    linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 10rem
    ),
    linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 0rem
    ),
        linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 20rem
    );

  mask-composite: intersect;
  position: absolute;
  width: 100vw;
  height: 100%;
  right: calc(0px - var(--padding));
  opacity: .4;
}


.quote .image {
  display: flex;
  justify-content: flex-start;
  align-items: end;
  padding-right: 10rem;
  z-index: 1;
  mask-image: linear-gradient(to bottom, 
  rgba(0, 0, 0, 1) calc(100% - 5rem), 
  rgba(0, 0, 0, 0) 100%) !important;
}

.quote .zitat{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  z-index: 1;
      margin-top: 10rem;
}

.zitat.flexbox {
  /* margin-top: 10rem; */
}

.quote figure {
  /* width: 40rem; */
  /* font-size: var(--headerfontsize); */
}

.quote figcaption {
  text-transform: uppercase;
  font-weight: var(--bold, 700);
  /* color: var(--highlight); */
   font-size: var(--headerfontsize);
}

.quote blockquote {
  margin-bottom: 3rem;
}

:root {
  --bottom_stronger: 
  linear-gradient(to bottom, 
  rgba(0, 0, 0, 1) calc(100% - 20rem), 
  rgba(0, 0, 0, 0) 100%);
}


@media screen and (min-width: 920px) and (max-width: 1080px) {

  .quote .zitat {
    display: flex;
    flex-wrap: nowrap;
}
  
}


@media (max-width: 919px) {


 .quote .background {
   height: 85% }

   .quote .background img {
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 5rem);
    height: 65%;
      object-fit: cover;
   }


  .quote .zitat{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  z-index: 1;
  margin-bottom: 3rem;
  }

  .quote .image {
        display: flex;
        justify-content: flex-start;
        z-index: 1;
         mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 5rem);
        width: 70%;    }

    .zitat.flexbox figure {
      margin-top: 5rem;
    }

    .quote {
      margin-bottom: 10rem;
    }


        .zitat.flexbox figure {
        margin-top: 3rem;
    }
}


@media (max-width: 700px) { 

      .quote .image {
        width: 100%;
    }

    .quote .background img {
      height: 60%;
      object-fit: cover;
      mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 5rem);
    }


}

@media screen and (max-width: 730px) {
  .quote {
      margin-bottom: 0;
    }
}


@media screen and (max-width: 490px) {
  .quote .image {
      padding-right: 5rem;
    }

    .quote .background img {
      height: 50%;
      object-fit: cover;
    }
}