At <https://www.artisanbelle.com> I have testimonials with photo and text displayed next to them (scroll down midway). I would like the grey background to only be on the text. I tried doing that, adding it to the text divs, but it didn't work. So I added it to the container div (pic-testimonial) that contains the image as well, but now it is showing up around the image, and I don't want it outside the image at all. I am not sure how to fix this.

```css
.testimonial-container {
  width: 80%;
  border: none;
  margin: auto;
}

/* For mobile */

.testimonial-imga,
.testimonial-imgb,
.testimonial-texta,
.testimonial-textb {
  width: 100%;
}

.testimonial-imga,
.testimonial-imgb {
  float: left;
}

.testimonial-texta,
.testimonial-textb {
  float: left;
  padding: 15px;
  width: 100%;
  text-align: center;
  font-size: 1.3em;
}

.pic-testimonial::after {
  content: "";
  clear: both;
  display: table;
}

.testimonial-photo {
  max-width: 100%;
  height: 451px;
}

@media only screen and (min-width: 768px) {
  /* for desktop */
  .pic-testimonial {
    background-color: #DFE3E6;
    overflow: auto;
    margin-bottom: 30px;
  }
  .testimonial-imga,
  .testimonial-texta,
  .testimonial-imgb,
  .testimonial-textb {
    width: 50%;
  }
  .testimonial-imga {
    float: left;
  }
  .testimonial-imgb {
    float: right;
  }
  .testimonial-texta {
    float: right;
    padding: 15px;
    width: 50% background-color: #DFE3E6;
  }
  .testimonial-textb {
    float: left;
    padding: 15px;
    width: 50%
  }
  .photo1 {
    display: block;
    height: 451px;
    overflow: hidden;
    position: relative;
  }
  .testimonial-photo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .test-text,
  .test-text2 {
    position: relative;
  }
  .test-text p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-16%, 80%);
    text-align: center;
  }
  .test-text2 p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-16%, 15%);
    text-align: center;
  }
}

.testimonial-texta p {
  color: #235A4A;
}

.testimonial-textb p {
  color: #235A4A;
}
```

```html
<div class="testimonial-container">

  <div class="pic-testimonial">
    <div class="testimonial-imga">
      <figure class="photo1"><img class="testimonial-photo" src="http://www.artisanbelle.com/images/stories/amandac.jpg" alt="Amanda C"></figure>
    </div>
    <div class="testimonial-texta">
      <div class="test-text">
        <p>"These white topaz earrings are gorgeous. The stones catch the light and are so pretty. They can be dressed up or down and the craftsmanship is top quality. A great pair of earrings that go with everything." <br>- Amanda Coldwell</p>
      </div>
    </div>
  </div>

  // more pic-testimonial blocks

</div>
```

I would like the grey background only around the entire text block next to the picture, not around the image. I would like it to extend from the right side of the image all the way to the entire block of text.