@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@200;300;400&family=Open+Sans&display=swap');

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

  body {
  	background: #edf2f8;
  	font-family: 'Barlow Semi Condensed', sans-serif;
  	line-height:1.7;
  	font-size: 13px;
  }
  .container {
  	max-width: 1440px;
  margin: 100px auto;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  }

  .card {
  	background: white;
  	border-radius: 10px;
  	padding: 30px;
  	box-shadow: rgba(17, 12, 46, 0, 15) 0px 48px 100px 0px;
  	margin-bottom: 10px;
  }

  .card_header {
	display: flex;
	align-items: center;
	margin-bottom: 10px;	
  }

  .card_header h3 {
  	font-size: 15px;
  }
   .card_header p {
  	opacity: 50%;
  }

  .card_img {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #996ed9;
margin-right: 10px;
  }

  .card_lead {
  	font-size: 1.5rem;
  	font-weight:500;
  	line-height: 1.3;
  	margin-bottom: 20px;
  }

    .card_quote {
  	font-size: 15px;
  	font-weight:500;
  	line-height: 1.4;
  	opacity: 70%;
  }

  .card--bg-purple {
	background: mediumpurple;
	color: white;
	grid-column: 1 / 3;
  }

    .card--bg-grey {
	background: grey;
	color: white;
  }
    .card--bg-black {
	background: black;
	color: white;
  }

  .card:nth-of-type(5) {
  	grid-column: 2 / 4;
  	grid-row: 2;
  }

   .card:nth-of-type(3) {
  	grid-column: 4 / 5;
  	grid-row: 1 / 3;
  }
  @media (max-width: 768px){
  	.container { grid-template-columns: 1fr;
  		width: 100%;
  }
  .card:nth-of-type(3) {
  	grid-column: 1;
  	grid-row: 3 / 4; 
  }

  .card:nth-of-type(5) {
  	grid-column: 1;
  	grid-row: 4/ 5;
  }

  .card--bg-purple {
  	grid-column: 1;
  }
  }

  h1{
  	margin-top: 50px ;  	
  	text-align: center;
  }
  button {
  	border:2px solid black;
  	background: mediumpurple;
  	border-radius:50px;
  	height: 50px;
  	color: white;
  	width: 200px;
  	cursor: pointer;
  }