body {
      margin: 0;
      padding: 40px;
      background: #ffffff;
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
    }

    .grid-container {
      width: 700px;
      height: 350px;
      display: grid;
      grid-template-columns: 180px 160px 160px 160px;
      grid-template-rows: 120px 100px 100px;
      gap: 14px;
      background: linear-gradient(135deg, rgb(160, 5, 5) 0%, #ff8787);
      padding: 14px;
    }

    .box {
      border-radius: 2px;
    }

    .purp {
      background: #0051ff;
    }

    .red {
      background: #ff0000;
    }

    .yellow {
      background: #ffbb00;
    }

    .box1 {
      grid-row: 1 / 4;
      grid-column: 1 / 2;
    }

    .box2 {
      grid-row: 1 / 2;
      grid-column: 2 / 4;
    }

    .box3 {
      grid-row: 1 / 2;
      grid-column: 4 / 5;
    }

    .box4 {
      grid-row: 2 / 3;
      grid-column: 2 / 3;
    }

    .box5 {
      grid-row: 2 / 3;
      grid-column: 3 / 4;
    }

    .box6 {
      grid-row: 2 / 4;
      grid-column: 4 / 5;
    }

    .box7 {
      grid-row: 3 / 4;
      grid-column: 2 / 3;
    }

    .box8 {
      grid-row: 3 / 4;
      grid-column: 3 / 4;
    }