@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: hsl(263, 55%, 52%);
  --secondary-black: hsl(219, 29%, 14%);
  --secondary-gray: hsl(217, 19%, 35%);
  --white: #f2f2f2;
  --light-gray: hsl(0, 0%, 81%);
  --light-grayish-blue: hsl(210, 46%, 95%);
}
body {
  font-size: 13px;
  font-family: "Barlow Semi Condensed", sans-serif;
  background-color: var(--light-gray);
}
.hero {
  display: grid;
  height: 80vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "card-one card-one card-tow card-five"
    "card-three card-four card-four card-five ";
  margin: 3rem;
  gap: 2.5rem;
}
.cards {
  padding: 1.2rem;
  border-radius: 12px;
}

img {
  border-radius: 50%;
}

h2,
h3,
p {
  color: var(--white);
}
h3 {
  opacity: 50%;
}
.quotation {
  opacity: 70%;
  font-size: 1.3rem;
  margin-top: 2rem;
}
.text {
  font-weight: 600;
  font-size: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  opacity: 1;
}
.profile {
  display: flex;
  gap: 1.5rem;
}
.card-one {
  background-color: var(--primary-color);
  grid-area: card-one;
}
.card-one .profile img {
  border: 3px solid rgb(146, 118, 192);
}
.card-tow {
  background-color: var(--secondary-gray);
  grid-area: card-tow;
}
.card-three {
  background-color: var(--white);
  grid-area: card-three;
}
.card-three h2,
.card-three h3,
.card-three p {
  color: var(--secondary-gray);
}
.card-four {
  background-color: var(--secondary-black);
  grid-area: card-four;
}
.card-four img {
  border: 2px solid var(--primary-color);
}
.card-five {
  background-color: var(--white);
  grid-area: card-five;
}
.card-five h2,
.card-five h3,
.card-five p {
  color: var(--secondary-gray);
}

@media only screen and (max-width: 768px) {
  body {
    font-size: 10px;
  }
  .hero {
    display: flex;
    flex-direction: column;
  }
}