body {
  margin: 0;
  padding: 0;
  font-family: "Barlow Semi Condensed", sans-serif;
  background-color: hsl(214, 17%, 92%);
}
section {
  width: 85%;
  margin: 10px auto;
  display: grid;
  grid-template-rows: repeat(5, fit-content);
  gap: 20px;
}
.logo-user {
  border-radius: 100%;
  margin: 0;
  width: 3rem;
}
.title-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.title-card > div {
  line-height: 0.2;
}
.card {
  padding: 10px 25px;
  background-color: hsl(263, 55%, 52%);
  border-radius: 12px;

  margin:auto;
}
.user-name {
  font-weight: 400;
  font-size: 1rem;
}
.name1 {
  color: hsl(0, 0%, 100%);
}
.name2 {
  color: hsl(0, 0%, 100%);
}

.user-role {
  color: hsl(0, 0%, 81%);
  font-size: 0.6rem;
}
.main1 {
  color: white;
  font-family: "Barlow Semi Condensed", sans-serif;
  white-space: normal;
  font-weight: 600;
}
.main-comment {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
  font-weight: 600;
}
.comment {
  color: hsl(214, 17%, 92%);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 200;
  font-size: 0.7rem;
}
.card2 {
  background-color: hsl(217, 19%, 35%);
}
.main2 {
  color: white;
}
.card3,
.card5 {
  background-color: white;
  color: hsl(217, 19%, 35%);
}
.role3,
.role5 {
  color: hsl(217, 19%, 35%);
}
.comment-3,
.comment-5 {
  color: hsl(217, 19%, 35%);
  font-weight: 400;
}

.card4 {
  background-color: hsl(219, 29%, 14%);
}
.name4,
.main4 {
  color: hsl(214, 17%, 92%);
}

@media screen and (min-width: 768px) {
  .img {
    width: 1rem;
  }
  section {
    width: 95%;
    margin: 10px auto;
    display: grid;
    grid-template-columns: repeat(8);
    grid-template-rows: repeat(2);
  }
  .card1 {
    grid-column: 1/6;
    grid-row: 1/2;
  }

  .card5 {
    grid-column: 7;
    grid-row: 1/3;
  }
  .card3 {
    /* background-color: red; */
    grid-column: 1/4;
  }
  .card4 {
    grid-column: 4/7;
  }
}
footer {
  font-family: "Barlow Semi Condensed", sans-serif;
  text-align: center;
  border-radius: 12px;
  font-weight: 600;
  color: hsla(0, 1%, 35%, 1);
  width: 90%;
  margin:20px; auto;
}
a {
  text-decoration: none;
  color: black;
}
.title-1 {
  position: relative;
}
.comma {
  position: absolute;
  color: hsla(0, 0%, 100%, 0.6);
  rotate: 180deg;
  font-family: sans-serif;
  left: 70%;
  top: -160px;
  font-size: 12rem;
  z-index: 1;
  opacity: 25%;
}