styles.css

*{
  margin: 0;
  padding: 0;
  /* box-sizing: border-box; */
}
body{
  max-height: 100vh;
  max-width: 100vw;
  background-color: hsl(210deg, 46%, 95%);
}

.outer-box{
  display: grid;
  max-width: 1150px;

  grid-template-columns: repeat(4, 1);
  grid-gap: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: auto;

}
/* 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 */

/* https://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@github.com/madhura-punde/pesto-students/p10-harsh-raj-madhura-punde */


img{
    float: left;
    margin-right: 15px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
    border: 2px solid hsl(0deg, 0%, 81%);
}
pre{
  font-size: 13px;
  color: black;
  opacity: 0.7;
  font-family: 'Barlow Semi Condensed', sans-serif;
  text-align: left;
  font-weight: 500;
  font-weight: bold;
}

h2{
  font-size: 13px;
  color: white;
  font-weight: 600;
  font-family: 'Barlow Semi Condensed', sans-serif;
}
.bg-pattern-1{
  background-image: url("images/bg-pattern-quotation.svg");
  background-repeat: no-repeat;
  background-position: right;
  background-color:hsl(263, 55%, 52%);
  color: white;
  grid-column: 1/3;
  grid-row: 1;
}

.bg-pattern-2{
  background-color: hsl(217, 19%, 35%);
  grid-row: 1;
  grid-column: 3;

}
.bg-pattern-3{
background-color: white;
grid-row: 2;

}
.bg-pattern-4{
  text-color: white;
  grid-row: 2;
  grid-column: 2/4;
  background-color: black;
}
.bg-pattern-5{
  grid-column: 4;
  grid-row: 1/3;
  text-color: black;
  background-color: white;

}

 .custom{
 opacity: 0.5;
} 


/* //added newly */

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

  .outer-box{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bg-pattern-1{
    grid-column: 1/3;
  }

}