:root {
  --pale-blue: #ecf2f8;
}

.barlow-semi-condensed-medium {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.barlow-semi-condensed-semibold {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  font-style: normal;
}

body {
  min-height: 100vh;
  background-color: var(--pale-blue);
  display: grid;
  justify-content: center;
  align-items: center;
  main {
    max-width: 1110px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    row-gap: 1.5rem;
    column-gap: 1.875rem;
    grid-template-areas:
      "daniel daniel jonathan kira"
      "jeanette patrick patrick kira";
    & > div {
      padding: 2rem;
      padding-block-start: 1.625rem;
      border-radius: 0.5rem;
      box-shadow: 40px 60px 50px -47px rgba(72, 85, 106, 0.25);
      .personality {
        display: grid;
        grid-template-columns: 1.75rem auto;
        grid-template-rows: auto auto;
        column-gap: 17px;
        row-gap: 4px;
        margin-block-end: 1.125rem;
        img {
          width: 1.75rem;
          height: auto;
          border-radius: 50%;
          grid-column: 1 / 2;
          grid-row: 1 / 3;
        }
        .user-name {
          color: #fff;
          font-size: 13px;
          line-height: 13px;
        }
        .verified {
          color: #fff;
          font-size: 11px;
          line-height: 11px;
          opacity: 0.5;
        }
      }
      h3 {
        color: #fff;
        font-size: 20px;
        line-height: normal;
        margin-block-end: 1.5rem;
      }
      .assessment {
        color: #fff;
        font-size: 13px;
        line-height: 18px;
        opacity: 0.7;
      }
    }
    .daniel {
      grid-area: daniel;
      background: #733fc8;
      background-image: url(../images/bg-pattern-quotation.svg);
      background-repeat: no-repeat;
      background-position: left 75% top;
      img {
        border: 2px solid #aa7df0;
      }
      h3 {
        margin-block-end: 1rem;
      }
      .assessment{
        color: #CFCFCF;
      }
    }
    .jonathan {
      grid-area: jonathan;
      background: #48556a;
      h3 {
        margin-block-end: 1rem;
      }
    }
    .jeanette {
      grid-area: jeanette;
      padding-block-end: 1.625rem;
      background: #ffffff;
      .personality {
        .user-name,
        .verified {
          color: #48556a;
        }
      }
      h3,
      .assessment {
        color: #48556a;
      }
    }
    .patrick {
      grid-area: patrick;
      padding-block-end: 1.625rem;
      background: #19202d;
      img {
        border: 2px solid #733fc8;
      }
      h3 {
        color: #ecf2f8;
      }
    }
    .kira {
      grid-area: kira;
      padding-block-end: 1.625rem;
      background: #ffffff;
      .personality {
        .user-name,
        .verified {
          color: #48556a;
        }
      }
      h3,
      .assessment {
        color: #48556a;
      }
    }
  }
}