style.css

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

:root {
--moderate-violet: hsl(263, 55%, 52%);
--very-dark-grayish-blue: hsl(217, 19%, 35%);
--very-dark-blackish-blue: hsl(219, 29%, 14%);
--white: hsl(0, 0%, 100%);
--light-gray: hsl(0, 0%, 81%);
--light-grayish-blue: hsl(210, 46%, 95%);
}

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

body {
  background-color: var(--light-grayish-blue);
  max-width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 13px;
}

main {
  margin: 1.8rem;
}

.section {
  display: grid;
  gap: 1rem;
} 

.section__card {
  max-width: 25.15rem;
  padding: 2rem;
  border-radius: 0.6rem;
}

.section__card img {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  margin-right: 1rem;
}

.section__card figure {
  display: flex;
}
.section__card figure h2 {
  font-size: 1rem;
  font-weight: 500;
}
.section__card figure span {
  font-size: 0.85rem;
  color: hsla(0, 0%, 100%, 0.67);
}

.section__card h1 {
  font-size: 1.54rem;
  padding: 1.38rem 0 1.2rem 0;
 
}
.section__card p{
  line-height: 1.4rem;
  color: var(--light-gray);
}

.section > :not(.section__card3, .section__card5){
  color: var(--white);
}

.section__card3 h2, .section__card5 h2{
  color: var(--very-dark-grayish-blue);
}
.section__card3 span, .section__card5 span{
  color: hsla(217, 19%, 35%, 0.718) !important;
}

.section__card3 h1, .section__card5 h1 {
  color: var(--very-dark-blackish-blue);
} 
.section__card3 p, .section__card5 p {
  color: hsla(217, 30%, 14%, 0.70);
} 
.section__card1 {
  background-color: var(--moderate-violet);
  background-image: url('./images/bg-pattern-quotation.svg');
  background-repeat: no-repeat;
  background-position: top right 1.5rem;
}

.section__card2 {
  background-color: var(--very-dark-grayish-blue);
}

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

.section__card4 {
background-color: var(--very-dark-blackish-blue);
 
}
.section__card5 {
  background-color: var(--white);
}

.section__card1 img {
  border: 2px solid#A775F1;
}
 .section__card4 img {
  border: 2px solid#733FC8;
}


@media screen and (min-width: 920px) {

  main {
    margin: 1.8rem 5rem;
  }
  
  .section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  } 

  .section__card {
    max-width: 100%;
  }

  .section__card1 {
    grid-row: 1/2;
    grid-column: 1/span 6;
  }

  .section__card2 {
    grid-row: 1/2;
    grid-column: 7/span 3;
 
  }
  .section__card3 {
    grid-column: span 3;
    grid-row: 2;
  }

  .section__card4 {
    grid-column: 4/span 6;
  }

  .section__card5 {
    grid-row: 1/3;
    grid-column: 10 / span 3;
  } 
}