* {
  box-sizing: border-box;
}

p,
blockquote {
  margin: 0;
}

html {
  font-size: 13px;
}

:root {
  /* Base Colors */
  --purple-50: hsl(260, 100%, 95%);
  --purple-300: hsl(264, 82%, 80%);
  --purple-500: hsl(263, 55%, 52%);

  --grey-100: hsl(214, 17%, 92%);
  --grey-200: hsl(0, 0%, 81%);
  --grey-400: hsl(224, 10%, 45%);
  --grey-500: hsl(217, 19%, 35%);
  --dark-blue: hsl(219, 29%, 14%);
  --black: hsl(0, 0%, 7%);
  --white: hsl(0, 0%, 100%);

  /* Font Weights */
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Shadows */
  --shadow-grey: hsla(0, 0%, 0%, 0.12);
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('./assets/fonts/BarlowSemiCondensed-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('./assets/fonts/BarlowSemiCondensed-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

body {
  background-color: var(--grey-100);
  font-family: 'Barlow Semi Condensed', sans-serif;
}

.testimonial__section {
  margin-block: 5.5rem;
  margin-inline: auto;
  padding-inline: 2.5rem;

  display: grid;
  /* The whitespace between each testimonial */
  gap: 2.5rem;
}

.testimonial {
  border-radius: 0.5rem;
  box-shadow: 3rem 3rem 3.5rem var(--shadow-grey);
  padding: 2.35rem;

  display: grid;
  /* The whitespace between the avatar and the quote's title */
  gap: 1rem;
}

.testimonial__avatar {
  border-radius: 50%;
  border: 0.15rem solid transparent;
  /* Fixed dimensions to prevent the avatar from stretching */
  width: 2.15rem;
  height: 2.15rem;
}

.testimonial__header {
  display: flex;
  /* The whitespace between the avatar and the name/status */
  gap: 1.5rem;
}

.testimonial__status {
  font-size: 0.85rem;
}

.testimonial__quote {
  display: grid;
  /* The whitespace between the quote's title and the quote itself */
  gap: 1.75rem;
}

.testimonial__title {
  font-size: 1.57rem;
}

.testimonial__detail {
  line-height: 1.45;
}

/* Testimonial Colors */
/* Purple*/
.testimonial--purple {
  background-color: var(--purple-500);
}

.testimonial--purple .testimonial__avatar {
  border: 0.15rem solid var(--purple-300);
}

.testimonial--purple .testimonial__name,
.testimonial--purple .testimonial__title {
  color: var(--white);
}

.testimonial--purple .testimonial__status,
.testimonial--purple .testimonial__detail {
  color: var(--purple-50);
}

/* Grey */
.testimonial--grey {
  background-color: var(--grey-500);
}

.testimonial--grey .testimonial__name,
.testimonial--grey .testimonial__title {
  color: var(--white);
}

.testimonial--grey .testimonial__status {
  color: var(--grey-200);
}

.testimonial--grey .testimonial__detail {
  color: var(--grey-100);
}

/* White */
.testimonial--white {
  background-color: var(--white);
}

.testimonial--white .testimonial__name,
.testimonial--white .testimonial__title {
  color: var(--grey-500);
}

.testimonial--white .testimonial__status,
.testimonial--white .testimonial__detail {
  color: var(--grey-400);
}

/* Dark Blue */
.testimonial--dark-blue {
  background-color: var(--dark-blue);
  color: var(--grey-100);
}

.testimonial--dark-blue .testimonial__avatar {
  border: 0.15rem solid var(--purple-500);
}

/* "Screen Reader Only" Styles */
.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Media Queries */
/* Medium Screens */
@media screen and (min-width: 48rem) {
  .testimonial__section {
    max-width: 64.61rem;

    grid-template-columns: repeat(2, 1fr);
  }

  /* Purple Testimonial */
  .testimonial:nth-child(1) {
    background-image: url('./assets/images/bg-pattern-quotation.svg');
    background-position: top 0 right 15%;
    background-repeat: no-repeat;
    grid-column: 1 / 3;
  }
}

/* Large Screens */
@media screen and (min-width: 74.375rem) {
  body {
    min-height: 100vh;

    display: grid;
    align-items: center;
  }

  .testimonial__section {
    margin-block: 2.5rem 0;
    max-width: 91.53rem;

    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
  }

  /* White (the first one) and Dark Blue Testimonials */
  .testimonial:nth-child(3),
  .testimonial:nth-child(4) {
    grid-row: 2;
  }

  /* Dark Blue Testimonial */
  .testimonial:nth-child(4) {
    grid-column: 2 / 4;
  }

  /* White (the last one) Testimonial */
  .testimonial:nth-child(5) {
    grid-row: 1 / 3;
  }
}