@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap");

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

  /* Neutral Colors */
  --White: hsl(0, 0%, 100%);
  --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%);
}

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

.grey-200 {
  color: var(--Grey-200);
}
.grey-400 {
  color: var(--Grey-400);
}
.grey-500 {
  color: var(--Grey-500);
}

.purple-500 {
  background-color: var(--Purple-500);
}

.purple-300 {
  color: var(--Purple-300);
}

.dark-blue {
  color: var(--Dark-blue);
}

.bg-dark-blue {
  background-color: var(--Dark-blue);
}

.bg-grey500 {
  background-color: var(--Grey-500);
}

.bg-white {
  background-color: var(--White);
}

.white {
  color: var(--White);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  font-family: "Barlow Semi Condensed", sans-serif;
  height: auto;
  background-color: var(--Grey-100);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  background-color: var(--Grey-100);
  main {
    .container {
      max-width: 110rem;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, minmax(auto-fit, 280px));

      grid-template-areas:
        "one one two five"
        "three four four five";
      gap: 3rem;

      .card {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 3rem;
        border-radius: 10px;
        box-shadow: 25px 40px 40px 5px rgba(0, 0, 0, 0.2);

        &.one {
          grid-area: one;
          background-image: url(images/bg-pattern-quotation.svg);
          background-repeat: no-repeat;
          background-position: top 0 right 60px;
        }
        &.two {
          grid-area: two;
        }
        &.three {
          grid-area: three;
        }
        &.four {
          grid-area: four;
        }
        &.five {
          grid-area: five;
        }
        .card__author {
          display: flex;
          gap: 15px;

          .card__image {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid var(--Purple-500);
          }
          .author_info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 2px;
            h3 {
              font-size: 1.3rem;
            }
            p {
              font-size: 1.1rem;
            }
          }
        }
        .card__lead {
          font-size: 2.1rem;
          line-height: 1.2;

          font-weight: 600;
        }
        .card__desc {
          font-size: 1.3rem;
          line-height: 1.4;

          margin-top: 5px;
          font-weight: 500;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  html,
  body {
    font-size: 58%;

    padding: 4rem 2.5rem;

    main {
      .container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas:
          "one "
          "two"
          "three"
          "four"
          "five";
        .card {
          &.one {
            background-image: unset;
          }
        }
      }
    }
  }
}