html {
  font-size: 62.5%;
}

.page {
  background-color: var(--background-page-color);
  font-family: var(--text-family);
  /* padding: clamp(8rem, 7.7rem + 0.84vw, 8.5rem) clamp(3.2rem, 0rem + 8vw, 8rem); */
  min-height: fit-content;
  min-width: fit-content;
  padding: 7rem 2.4rem;
}

.testimonials {
  display: grid;
  grid-template:
    "big-horizontal-1 big-horizontal-1 small-1 big-vertical" auto
    "small-2 big-horizontal-2 big-horizontal-2 big-vertical" auto / 25.5rem 25.5rem 25.5rem 25.5rem;
  gap: 2.4rem 3rem;
  min-height: 100vh;
  justify-content: center;
  align-content: center;
}

/* TESTIMONIAL CARDS */
.testimonial {
  padding: 2.6rem 3.2rem 3.2rem;
  border-radius: 0.8rem;
  box-shadow: 4rem 6rem 5rem -4.7rem rgba(72, 85, 106, 25%);
}

.testimonial__author {
  display: flex;
  gap: 1.7rem;
  align-items: center;
  margin-bottom: 1.8rem;
}

.author__avatar {
  border-radius: 50%;
  width: 2.8rem;
}

.author__name {
  font-size: var(--text-author-name-size);
  font-weight: var(--text-author-name-weight);
  line-height: var(--text-author-name-height);
  letter-spacing: var(--text-author-name-spacing);
  margin-bottom: 0.4rem;
}

.author__status {
  font-size: var(--text-author-status-size);
  font-weight: var(--text-author-status-weight);
  line-height: var(--text-author-status-height);
  letter-spacing: var(--text-author-status-spacing);
  opacity: var(--text-author-status-opacity);
}

.testimonial__header {
  font-size: var(--text-testimonial-header-size);
  font-weight: var(--text-testimonial-header-weight);
  line-height: var(--text-testimonial-header-height);
  letter-spacing: var(--text-testimonial-header-spacing);
}

.testimonial__body {
  font-size: var(--text-testimonial-body-size);
  font-weight: var(--text-testimonial-body-weight);
  line-height: var(--text-testimonial-body-height);
  letter-spacing: var(--text-testimonial-body-spacing);
  opacity: var(--text-testimonial-body-opacity);
}

.testimonial:first-child {
  position: relative;
  grid-area: big-horizontal-1;
  background-color: var(--background-first-card-color);
  color: var(--text-light-color);
  z-index: -1;
}

.testimonial:first-child .testimonial__header {
  margin-bottom: 1.6rem;
  z-index: 1;
}

.testimonial:first-child .author__avatar {
  border: 0.2rem solid var(--border-first-avatar-color);
}

.testimonial:first-child::after {
  content: "";
  background: url(../images/bg-pattern-quotation.svg) center center no-repeat;
  width: 10.4rem;
  height: 10.2rem;
  position: absolute;
  top: 0;
  right: 8rem;
  z-index: -1;
}

.testimonial:nth-child(2) {
  grid-area: small-1;
  background-color: var(--background-second-card-color);
  color: var(--text-light-color);
}

.testimonial:nth-child(2) .testimonial__header {
  margin-bottom: 1.6rem;
}

.testimonial:nth-child(3) {
  grid-area: small-2;
  background-color: var(--background-third-card-color);
  color: var(--text-dark-color);
}

.testimonial:nth-child(3) .testimonial__header {
  margin-bottom: 2.4rem;
}

.testimonial:nth-child(4) {
  grid-area: big-horizontal-2;
  background-color: var(--background-fourth-card-color);
  color: var(--text-light-color);
}

.testimonial:nth-child(4) .author__avatar {
  border: 0.2rem solid var(--border-fourth-avatar-color);
}

.testimonial:nth-child(4) .testimonial__header {
  margin-bottom: 2.4rem;
}

.testimonial:last-child {
  grid-area: big-vertical;
  background-color: var(--background-fifth-card-color);
  color: var(--text-dark-color);
}

.testimonial:last-child .testimonial__header {
  margin-bottom: 2.4rem;
}

/* ATTRIBUTION */

.attribution {
  font-size: 1.1rem;
  color: var(--text-light-color);
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: hsl(263, 55%, 52%, 80%);
  padding: 1rem;
  border-radius: 1rem;
}

.attribution__link {
  color: var(--background-fourth-card-color);
}

.attribution__link:hover {
  color: var(--text-light-color);
}