.cards h2 {
  grid-column: 1 / -1;
  margin-bottom: var(--space-small);
  max-width: 60%;
}

.cards h2 + .cards-wrapper {
  margin-top: var(--space-med);
}

.cards .subtitle {
  margin-bottom: var(--space-med);
  max-width: 60%;
}

.card {
  display: flex;
  border: var(--border);
  border-radius: var(--border-radius);
  flex-direction: column;
  grid-column: span 8;
  overflow: hidden;
  position: relative;
}

.card-img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  padding: var(--card-padding);
}

.card-content h3 {
  font-size: var(--fs-s);
}


/* .card-content a:before {
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
} */

@media (width <= 1024px) {
  .cards .subtitle, .cards h2 {
    max-width: 100%;
  }
  .card {
    flex-direction: row;
    grid-column: 1 / -1;
  }
  .card-img {
    width: 33.33%;
  }
}

@media (width <= 768px) {
  .card-img {
    width: 50%;
  }
}

@media (width <= 560px) {
  .card {
    flex-direction: column;
  }
  .card-img {
    width: 100%;
  }
}

.testimonials h2 {
  grid-column: 1 / -1;
  margin-bottom: var(--space-small);
  max-width: 60%;
}

.testimonials h2 + .testimonials-wrapper {
  margin-top: var(--space-med);
}

.testimonials .subtitle {
  margin-bottom: var(--space-med);
  max-width: 60%;
}

.testimonial {
  display: flex;
  border: var(--border);
  border-radius: var(--border-radius);
  flex-direction: column;
  grid-column: span 12;
  overflow: hidden;
  position: relative;
}

.testimonial-img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.testimonial-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  padding: var(--card-padding);
}

.testimonial-content h3 {
  font-size: var(--fs-s);
}
.testimonial-content div p {
  font-size: var(--fs-s);
  font-weight: 300;
}
.testimonial-content-position {
  font-size: var(--fs-body-m);
}


/* .testimonial-content a:before {
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
} */

@media (width <= 1024px) {
  .testimonials .subtitle, .testimonials h2 {
    max-width: 100%;
  }
  .testimonial {
    flex-direction: row;
    grid-column: 1 / -1;
  }
  .testimonial-img {
    width: 33.33%;
  }
}

@media (width <= 768px) {
  .testimonial-img {
    width: 50%;
  }
}

@media (width <= 560px) {
  .testimonial {
    flex-direction: column;
  }
  .testimonial-img {
    width: 100%;
  }
}