@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,400;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Outfit:wght@100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
.card-1, .card-5 {
  background-color: hsl(256, 67%, 59%);
}

.card-3, .card-8 {
  background-color: hsl(39, 100%, 71%);
}

.card-4 {
  background-color: hsl(254, 88%, 90%);
}

.card-7 {
  background-color: hsl(31, 66%, 93%);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 0.2fr;
  max-width: 65rem;
  gap: 1.5rem;
  grid-template-areas: "side   head        head        timePost" "side   platforms   schedule    timePost" "side   growth      followers   followers";
}

.card-1 {
  grid-area: head;
}
.card-1 h2 {
  font-weight: 500;
  font-size: 2.5rem;
}
.card-1 .highlight {
  color: hsl(39, 100%, 71%);
}
.card-1 .italic {
  font-style: italic;
}

.card-2 {
  grid-area: platforms;
  height: 15rem;
  overflow: hidden;
}
.card-2 h2 {
  font-size: 1.8rem;
}

.card-3 {
  grid-area: schedule;
  height: 15rem;
  overflow: hidden;
}
.card-3 h2 {
  font-size: 1.767rem;
}

.card-4 {
  grid-area: timePost;
  height: 32rem;
  overflow: hidden;
}
.card-4 p {
  font-size: 1rem;
}

.card-5 {
  grid-area: followers;
}
.card-5 h2 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.95rem;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}

.card-6 {
  grid-area: growth;
}
.card-6 h2 {
  font-size: 3rem;
}

.card-7 .highlight {
  color: hsl(256, 67%, 59%);
  font-style: italic;
}
.card-7 h2 {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 500;
  font-size: 2rem;
}

.card-8 h2 {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 500;
  font-size: 2.2rem;
}

.side {
  grid-area: side;
}

.img-1 {
  width: 8rem;
}

.img-2 {
  width: 18.2rem;
}

.img-3 {
  width: 12rem;
}

.img-4 {
  margin-top: 0.7rem;
  margin-bottom: 0.7rem;
  width: 20rem;
  height: 20rem;
}

.img-5 {
  width: 10rem;
  height: 9rem;
}

.img-6 {
  width: 9.5rem;
}

.img-7 {
  width: 11.5rem;
}

.img-8 {
  width: 12rem;
}

body {
  font-family: "Barlow Semi Condensed", sans-serif;
}

@media (max-width: 1050px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "head       head" "platforms  schedule" "timePost   followers" "growth     growth" "side       side";
    padding: 5%;
  }
  html {
    font-size: 14px;
  }
  .card-4 {
    height: 33rem;
  }
}
@media (max-width: 576px) {
  .grid-container {
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: "head" "platforms" "schedule" "timePost" "followers" "growth" "side";
  }
  html {
    font-size: 14px;
  }
  .card-4 p {
    font-size: 1.5rem;
  }
}/*# sourceMappingURL=main.css.map */