body {
  background-color: hsl(0, 0%, 81%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  padding-top: 30px;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-style: normal;
}

.card {
  padding: 20px;
  border-radius: 8px;
  min-width: 260px;
  max-width: 260px;
}
.avatar {
  display: flex;
  flex-direction: row;
  align-items: center;
}
img {
  width: 34px;
  border-radius: 50%;
  margin: 15px;
}
.name {
  display: block;
  margin: 0;
}
h2 {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 0;
  margin-top: 0;
}
h3 {
  font-size: 13px;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 0;
}
.big-text {
  font-size: 18px;
  font-weight: 600;
  padding-top: 0;
}
.small-text {
  font-size: 13px;
  font-weight: 500;
  padding-top: 15px;
}

#daniel {
  background-color: hsl(263, 55%, 52%);
}
#daniel img {
  border: 2px solid hsl(264, 82%, 80%);
}
#daniel h2,
#daniel .big-text {
  color: hsl(260, 100%, 95%);
}
#daniel h3,
#daniel .small-text {
  color: hsl(264, 82%, 80%);
}

#jonathan {
  background-color: hsl(217, 19%, 35%);
}
#jonathan img {
  border: 2px solid hsl(224, 10%, 45%);
}
#jonathan h2,
#jonathan .big-text {
  color: hsl(214, 17%, 92%);
}
#jonathan h3,
#jonathan .small-text {
  color: hsl(0, 0%, 81%);
}

#jeanette {
  background-color: hsl(0, 0%, 100%);
}
#jeanette h2,
#jeanette .big-text {
  color: hsl(219, 29%, 14%);
}
#jeanette h3{
    color: hsl(224, 10%, 45%);
}
#jeanette .small-text {
  color: hsl(0, 0%, 7%);
}

#patrick {
  background-color: hsl(219, 29%, 14%);
}
#patrick img {
  border: 2px solid hsl(263, 55%, 52%);
}
#patrick h2,
#patrick .big-text,
#patrick h3,
#patrick .small-text {
  color: hsl(0, 0%, 81%);
}

#kira {
  background-color: hsl(0, 0%, 100%);
}
#kira h2,
#kira .big-text {
  color: hsl(217, 19%, 35%);
}
#kira h3,
#kira .small-text {
  color: hsl(224, 10%, 45%);
}

@media screen and (max-width: 1100px){
    main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 20px;
}
}

@media screen and (min-width: 1100px){
    main{
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: auto auto;
        gap: 25px;
        max-width: 1040px;
    }
    .card{
        min-width: initial;
        max-width: initial;
    }
    #daniel{
        grid-area: 1 / 1 / 1 / 3;
    }
    #jonathan{
       grid-area: 1 / 3 / 1 / 3;
    }
    #kira{
        grid-area: 1 / 4 / 3 / 4;
    }
    #jeanette{
        grid-area: 2 / 1 / 2 / 1;
    }
    #patrick{
        grid-area: 2 / 2 / 2 / 4;
    }
}