@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --black: #121212;
  --dark: #19202d;
  --white: #ffffff;
  --grey-100: #e7eaee;
  --grey-200: #cfcfcf;
  --grey-300: #a3aab4;
  --grey-400: #676d7e;
  --grey-500: #48556a;
  --purple-50: #ede4ff;
  --purple-300: #a775f1;
  --purple-500: #733fc8;
}
.text-white {
  color: var(--white);
}
.text-grey-100 {
  color: var(--grey-100);
}
.text-grey-200 {
  color: var(--grey-200);
}
.text-grey-300 {
  color: var(--grey-300);
}
.text-grey-400 {
  color: var(--grey-400);
}
.text-grey-500 {
  color: var(--grey-500);
}
.text-purble-50 {
  color: var(--purple-50);
}

html {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 500;
}
body {
  margin: 0;
  background-color: #f6f5f6;
}
.section-cards {
  width: 305px;
  margin: auto;
}
.cards {
  margin: 40px 0;
  display: grid;
  grid-template-columns: auto;
  justify-content: center;
  gap: 32px;
}
.card {
  width: 305px;
  padding: 32px;
  border-radius: 8px;
}
.profile {
  display: flex;
  align-items: center;
  gap: 17px;
}
.avatar {
  border-radius: 50% 50%;
  width: 28px;
  height: 28px;
  overflow: hidden;
}
.border-avatar {
  border: 2px solid var(--purple-300);
}
.avatar img {
  width: 100%;
  object-fit: cover;
}
.name-verified .name {
  font-size: 13px;
}
.name-verified .verified {
  font-size: 11px;
}

.card-purple {
  background-color: var(--purple-500);
}
.card-grey {
  background-color: var(--grey-500);
}

.card-white {
  background-color: var(--white);
}

.card-dark {
  background-color: var(--dark);
}
.card .title {
  font-size: 20px;
  font-weight: 600;
  margin: 16px 0;
}
.card p {
  font-size: 13px;
}
@media screen and (min-width: 768px) {
  .section-cards {
    width: 647px;
  }
  .cards {
    grid-template-columns: repeat(2, 305px);
  }
  .card:nth-child(1) {
    width: 100%;
    grid-column: 1 / 3;
  }
  .card:nth-child(4) {
    width: 100%;
    grid-column: 1 / 3;
  }
  .card:nth-child(5) {
    width: 100%;
    grid-column: 1 / 3;
  }
}
@media screen and (min-width: 1440px) {
  .section-cards {
    width: 1114px;
  }
  .cards {
    grid-template-columns: repeat(4, 305px);
  }
  .card:nth-child(1){
    grid-column: 1 / 3;
  }
  .card:nth-child(3){
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  .card:nth-child(4){
    grid-column: 2 / 4;
    grid-row: 2 / 3;
  }
  .card:nth-child(5){
    grid-column: 4 / 5;
    grid-row: 1 / 3;
  }
}