* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    background-color: hsl(0, 0%, 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Semi Condensed', sans-serif;
    min-height: 100vh;
    padding: 2rem;
  }
  
  .container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, auto);
    gap: 20px;
    max-width: 1400px;
    width: 100%;
  }
  
  .card {
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    padding: 2rem;
    display: flex;
    flex-direction: column;
  }
  
  .profile {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .profile img {
    border-radius: 50%;
    width: 32px;
    height: 32px;
  }
  
  .profile-content {
    display: flex;
    flex-direction: column;
  }
  
  .profile-content header {
    font-size: 12px;
    margin-bottom: 5px;
  }
  
  .profile-content p {
    font-size: 10px;
  }
  
  .card h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  
  .card p {
    font-size: 13px;
  }
  

  .daniel_clifford {
    background-color: hsl(263, 55%, 52%);
    color: white;
    grid-column: 1 / span 4;
    grid-row: 1 / span 3;
    position: relative;
  }

  .daniel_clifford .quote-icon {
    position: absolute;
    top: 0rem;
    right: 3rem;
    width: 100px;
    height: 90px;
    border: 0cap;
  }

  .daniel_clifford img {
    border: solid 2px hsl(264, 82%, 80%);
  }
  
  .jonathan_walters {
    background-color: hsl(217, 19%, 35%);
    color: white;
    grid-column: 5 / span 2;
    grid-row: 1 / span 3;
  }
  
  .kira_whittle {
    background-color: hsl(0, 0%, 100%);
    color: hsl(0, 0%, 7%);
    grid-column: 7 / span 2;
    grid-row: 1 / span 6;
  }
  
  .jeanette_harmon {
    background-color: hsl(0, 0%, 100%);
    color: hsl(0, 0%, 7%);
    grid-column: 1 / span 2;
    grid-row: 4 / span 3;
  }
  
  .patrick_abrams {
    background-color: hsl(0, 0%, 7%);
    color: white;
    grid-column: 3 / span 4;
    grid-row: 4 / span 3;
  }

  .patrick_abrams img {
    border: solid 2px hsl(263, 55%, 52%);
  }

  .attribute {
    display: flex;

  }

  @media  (max-width: 768px) {
    .container {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
    }
  
    .daniel_clifford,
    .jonathan_walters,
    .kira_whittle,
    .jeanette_harmon,
    .patrick_abrams {
      grid-column: auto;
      grid-row: auto;
    }
  }