html {
  font-size: 13px;
  font-family: "Barlow Semi Condensed", Helvetica, sans-serif;
}
body {
  background-color: hsl(210, 46%, 95%);
}

  h4 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 1%;
    z-index: 2;
  }

   
  .container {
    display: grid;
    width: 85%;
    margin: 3% auto;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas: "daniel daniel jonathan kira" "jeanette patrick patrick kira";
    grid-gap: 25px;
    align-items: stretch;
    justify-items: stretch;
    transform: scale(0.9);
  }

    .pic {
      border-radius: 50%;
      width: 30px;
      height: 30px;
    }


    #quote-img {
      position: absolute;
      left: 30%;
      top: 0%;
      z-index: -1;
    }


    .item {
      width: auto;
      height: auto;
      max-height: fit-content;
      border-radius: 7px;
      padding: 10px 35px;
      line-height: 1.4;
      z-index: 0;
    }

      .quote {
        color: hsla(0, 0%, 100%, 0.7);
      }

      .name {
        font-size: 1rem;
        font-weight: 600;
        display: inline-block;
        line-height: 1.2;
      }

        .name span {
          display: inline-block;
          font-weight: 500;
          color: hsla(0, 0%, 100%, 0.5);
        }


      .daniel, .jonathan, .patrick {
        color:hsl(0, 0%, 100%);
      }

      .jeanette, .kira {
        color: hsl(219, 29%, 14%);
      }

        .jeanette .name span, .kira .name span {
          color: hsla(219, 29%, 14%, 0.5);
        }

        .jeanette .quote, .kira .quote {
          color: hsla(219, 29%, 14%, 0.7);
        }

      .daniel {
        grid-area: daniel;
        background-color: hsl(263, 55%, 52%);
      }

        .daniel .pic {
          border: solid 0.7px hsl(0, 0%, 100%);
        }

      .jonathan {
        grid-area: jonathan;
        background-color: hsl(217, 19%, 35%);

      }

      .jeanette {
        grid-area: jeanette; 
        background-color: hsl(0, 0%, 100%);
      }

        .jeanette h4 {
          white-space: pre-line;
        }

      .patrick {
        grid-area: patrick;
        background-color: hsl(219, 29%, 14%);
      }

        .patrick .pic {
          border: solid 0.7px hsl(263, 55%, 52%);
        }

      .kira {
        grid-area: kira;
        background-color: hsl(0, 0%, 100%);
      }




/*Media Queries*/

@media screen and (min-width: 300px) and (max-width: 850px) {
  .container {
    display: flex;
    width: 90%;
    height: 85%;
    margin: 10px auto;
    flex-direction: column;
  }

    .item {
      box-shadow: 5px 2px 10px hsla(217, 19%, 35%, 0.2);
    }
}