* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.attribution {
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}
body {
  font-size: 13px;
  color: ghostwhite;
  background-color: hsl(210, 46%, 95%);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 500;
}
small {
  opacity: 50%;
}
h4 {
  font-size: 23px;
  margin-top: 20px;
  font-weight: 600;
}
.container {
  display: grid;
  grid-template-columns: 1fr;
  margin: 30px;
  gap: 30px;
}
.cards .quotes {
  position: absolute;
  right: 35px;
  top: 15px;
  scale: 1.3;
  filter: brightness(1.1);
  opacity: 95%;
}
.cards.violet h4 {
  position: relative;
}
.cards {
  position: relative;
  padding: 30px;
  max-height: 100%;
  border-radius: 10px;
  width: 85%;
  margin: auto;
}
.cards .images {
  display: flex;
  align-items: center;
}
.images div:last-child {
  margin-left: -10px;
}
.cards .images img {
  border-radius: 50%;
  margin-right: 10px;
  width: 60%;
}
.cards p {
  line-height: 1.6;
  margin-top: 20px;
  opacity: 70%;
}
.cards.violet {
  background-color: hsl(263, 55%, 52%);
}
.violet .images img {
  border: 3px solid hsla(263, 24%, 66%, 0.871);
}
.cards.grayish-blue {
  background-color: hsl(217, 19%, 35%);
}
.cards.blackish-blue {
  background-color: hsl(219, 29%, 14%);
}
.cards.blackish-blue .images img {
  border: 3px solid hsl(263, 55%, 52%);
}
.cards.white {
  background-color: hsl(0, 0%, 100%);
  color: hsl(217, 19%, 35%);
}

@media (min-width: 920px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (min-width: 1280px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    scale: 0.8;
    width: 85%;
    margin: auto;
  }
  .cards .quotes {
    position: absolute;
    top: 15px;
    right: 120px;
    scale: 1.3;
  }

  .cards {
    width: 100%;
    height: 100%;
  }
  .cards.last {
    grid-column: 4;
    grid-row: 1 / span 2;
  }
  .cards.last p {
    padding: 0 15px 0 3px;
  }
  .cards.violet {
    grid-column: 1 / span 2;
  }
  .cards.violet h4 {
    padding-right: 10px;
    position: relative;
  }
  .cards.cards.blackish-blue {
    grid-column: 2 / span 2;
  }
}