main{
  display: grid;
  max-width: 1150px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, min-content);
  grid-gap: 20px;
}
.card{
  display: flex;
  flex-direction: column;
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  padding: 30px 40px;
}
.card__head{
  display: flex;
  align-items: center;
  color: hsl(0, 0%, 81%);
  margin-bottom: 10px;
}
.name{
  font-weight: 600;
  font-size: 15px;
}
.title{
  opacity: 0.5;
}
.card__heading{
  color: #fff;
  margin-bottom: 10px;
  font-size: 20px;
}
.card__detail{
  color: hsl(0, 0%, 81%);
  line-height: 1.5;
  opacity: 0.7;
}
.card-1{
  grid-column: 1/3;
  border: 1px solid #db49c6;
}
.card-2{
  grid-column: 3/4;
  border: 1px solid #dcba72;
}
.card-3{
  grid-row: 2/3;
  grid-column: 1/2;
  border: 1px solid #d9d9d9;
}
.card-4{
  grid-row: 2/3;
  grid-column: 2/4;
  border: 1px solid #dcba72;
}
.card-5{
  grid-row: -1/1;
  grid-column: 4/5;
  border: 1px solid #d9d9d9;
}


.card-6{
  grid-column: 3/3;
  border: 1px solid #db49c6;
}

.card-7{
  grid-column: 1/3;
  border: 1px solid #db49c6;
}


.card-1 .card__heading,
.card-1 .card__detail,
.card-2 .card__heading,
.card-2 .card__detail,
.card-3 .card__heading,
.card-3 .card__detail,
.card-4 .card__heading,
.card-4 .card__detail,
.card-5 .card__heading,
.card-5 .card__detail,
.card-6 .card__heading,
.card-6 .card__detail{
  color: #222;
}
@media (max-width: 1024px){
  main{
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, min-content);
    width: 95%;
    grid-gap: 15px;
  }
  .card-1{
    grid-column: 1/3;
  }
  .card-2{
    grid-column: 3/4;
  }
  .card-5{
    grid-column: 1/4;
    grid-row: 3/4;
  }
  .card-6{
    grid-column: 1/4;
    grid-row: 3/4;
  }
}
@media (max-width: 768px){
  main{
    margin-top: 20px;
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    grid-template-rows: minmax(auto, auto);
  }
  .card{
    grid-column: unset !important;
    grid-row: unset !important;
  }
}