.testimonial-wrapper {
  width: 100%;
  background-color: #fbeff3;
  color: black;
}

.testimonial-text-area {
  background-color: #fbeff3;
  padding: 40px 20px;
  color: black;
}

.testimonial-content {
  display: none; 
  opacity: 0;
  transform: translateY(10px); 
  transition: opacity 0.2s ease-out, transform 0.4s ease-out; 
}

.testimonial-content.active {
  display: block;
}

.testimonial-content.active.visible {
  opacity: 1;
  transform: translateY(0);
}

.testimonial-quote { font-family: 'Volkhov', serif; font-size: 20px; font-style: italic; border-left: 3px solid #4aa190; padding-left: 20px; margin-bottom: 20px; }
.testimonial-author { font-weight: 700; font-size: 16px; color: black; }

.image-container {
  display: flex;
  flex-wrap: wrap;
}

.testimonial-grid-item {
  flex: 0 0 50%;
  width: 50%;
  aspect-ratio: 1 / 1;
  position: relative; 
}

.hidden-sm-down {
  display: none;
}

.testimonial-grid-item a {
  display: block;
  width: 100%;
  height: 100%;
}

.testimonial-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
  filter: grayscale(80%);
  transition: all 0.3s ease;
}

.testimonial-trigger.active img,
.testimonial-trigger:hover img {
  filter: grayscale(0%);
  transform: scale(1.05);
  z-index: 10;
}

@media (min-width: 992px) {
  .hidden-sm-down {
    display: block;
  }

  .testimonial-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 25vw;
    gap: 0;
    grid-template-areas:
      "img1 img2 text-col img5"
      "img3 img4 text-col img6";
  }
  
  .image-container {
    display: contents;
  }

  .testimonial-grid-item {
    width: auto; 
    aspect-ratio: auto;
  }

  .testimonial-text-area { grid-area: text-col; }
  .img-1 { grid-area: img1; }
  .img-2 { grid-area: img2; }
  .img-3 { grid-area: img3; }
  .img-4 { grid-area: img4; }
  .img-5 { grid-area: img5; }
  .img-6 { grid-area: img6; }
  
  .testimonial-text-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px;
  }
  
  .text-lg-left { text-align: left !important; }
}