/* ------------------- */
/* Custom Properties   */
/* ------------------- */
:root {
  /* Primary Colors */
  --clr-primary-violet: hsl(263, 55%, 52%);
  --clr-primary-gray-blue: hsl(217, 19%, 35%);
  --clr-primary-black-blue: hsl(219, 29%, 14%);
  --clr-primary-white: hsl(0, 0%, 100%);

  /* Neutral Colors */
  --clr-neutral-gray: hsl(0, 0%, 81%);
  --clr-neutral-light-gray-blue: hsl(210, 46%, 95%);

  /* Typography */
  --ff-main: 'Barlow Semi Condensed', sans-serif;
  --fs-body: 13px;
  --fw-medium: 500;
  --fw-bold: 600;
}

/* ------------------- */
/* Reset               */
/* ------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h2,
p,
blockquote {
  margin: 0;
}

/* ------------------- */
/* General Styling     */
/* ------------------- */
body {
  font-family: var(--ff-main);
  font-size: var(--fs-body);
  background-color: var(--clr-neutral-light-gray-blue);
  
  display: grid;
  place-content: center;
  min-height: 100vh;
  padding: 4rem 1.5rem;
}

/* ------------------- */
/* Grid Container      */
/* ------------------- */
.testimonial-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 1110px;
}

/* ------------------- */
/* Card Styling        */
/* ------------------- */
.card {
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 20px 20px 40px -15px hsla(217, 19%, 35%, 0.25);
}

.card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.card__img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid hsla(0, 0%, 100%, 0.5);
}

.card__name {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.card__status {
  opacity: 0.5;
}

.card__title {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.card__quote {
  opacity: 0.7;
  line-height: 1.4;
}

/* Card Color Variations */
.card--violet {
  background-color: var(--clr-primary-violet);
  color: var(--clr-primary-white);
}

.card--gray-blue {
  background-color: var(--clr-primary-gray-blue);
  color: var(--clr-primary-white);
}

.card--black-blue {
  background-color: var(--clr-primary-black-blue);
  color: var(--clr-primary-white);
}

.card--white {
  background-color: var(--clr-primary-white);
  color: var(--clr-primary-gray-blue);
}

.card--white .card__img {
  border-color: var(--clr-primary-violet);
}

/* Background Quote Icon */
.card--quote-icon {
  background-image: url(./images/bg-pattern-quotation.svg);
  background-repeat: no-repeat;
  background-position: top right 10%;
}

/* ------------------- */
/* Footer              */
/* ------------------- */
.attribution { font-size: 11px; text-align: center; margin-top: 2rem; }
.attribution a { color: hsl(228, 45%, 44%); }

/* ------------------- */
/* Media Query: Desktop */
/* ------------------- */
@media (min-width: 1024px) {
  .testimonial-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .card--violet {
    grid-column: span 2;
  }

  .card--black-blue {
    grid-column: span 2;
  }

  /* Last card (Kira) */
  .testimonial-grid > article:last-child {
    grid-column: 4 / 5;
    grid-row: 1 / 3;
  }

  .card--quote-icon {
    background-position: top right 80px;
  }
}